/* Guía del cambio de aceite (28/10/2026). Mucho dibujo y poca letra: los dibujos son SVG
   propios con los colores de la web («Mono y naranja» y el tono ámbar de la página).
   Va encima de paginas.css y usa sus variables. */

:root { --ac-aceite: #D9A21B; --ac-viejo: #2B2118; --ac-leche: #E9E2D2; --ac-rojo: #C62E24; --ac-ambar: #E59A00; }

/* ---------- cabeza ---------- */
.ac-cabeza { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(24px, 4vw, 56px) clamp(32px, 4vw, 56px); }
.ac-respuesta { margin-top: 18px; font-family: var(--titulo); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.15; color: var(--mono); max-width: 22ch; }
.ac-respuesta mark { background: linear-gradient(transparent 58%, var(--acento-suave) 58%); color: inherit; padding: 0 .1em; }
.ac-cabeza .entradilla { margin-top: 14px; }
.ac-cabeza .nota { margin-top: 14px; }
.ac-regla { margin: 0; background: var(--acento-suave); border-radius: var(--radio-l); padding: clamp(16px, 2.5vw, 28px); }
.ac-regla svg { display: block; width: 100%; height: auto; }
.ac-s-papel { fill: var(--blanco); stroke: var(--linea-fuerte); stroke-width: 2; }
.ac-s-acento { fill: var(--acento); }
.ac-s-mono { fill: var(--mono); }
.ac-s-num { font: 700 64px var(--titulo); fill: var(--mono); }
.ac-s-pie { font: 700 15px var(--titulo); letter-spacing: .14em; fill: var(--tinta-3); }
.ac-s-o { font: 700 28px var(--titulo); fill: var(--tinta-3); }
.ac-s-km { font: 700 20px var(--titulo); fill: var(--blanco); letter-spacing: .04em; }
.ac-s-lema { font: 700 24px var(--titulo); fill: var(--mono); }
.ac-s-arco { fill: none; stroke: var(--hielo-2); stroke-width: 12; stroke-linecap: round; }
.ac-s-arco-lleno { fill: none; stroke: var(--acento); stroke-width: 12; stroke-linecap: round; }
.ac-s-aguja { stroke: var(--naranja); stroke-width: 5; stroke-linecap: round; }

.ac-cuerpo { padding-bottom: var(--seccion); }
.ac-cuerpo h2 { font-family: var(--titulo); font-weight: 700; font-size: var(--t-h2); line-height: 1.08; color: var(--mono); }
.ac-seccion { margin-top: clamp(56px, 7vw, 96px); }
.ac-intro, .ac-pie { margin-top: 10px; color: var(--tinta-2); max-width: 60ch; }
.ac-pie { margin-top: 22px; }

/* ---------- calculadora ---------- */
.ac-calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "titulo titulo" "datos res"; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; }
.ac-calc h2 { grid-area: titulo; padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) 0; }
.ac-calc__datos { grid-area: datos; padding: clamp(18px, 3vw, 32px) clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px); display: grid; gap: 22px; }
.ac-calc fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ac-calc legend { font-family: var(--titulo); font-weight: 700; font-size: 1.0625rem; color: var(--mono); margin-bottom: 10px; padding: 0; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-chip input, .ac-plan input, .ac-duro input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--linea-fuerte); border-radius: 999px; font-weight: 600; color: var(--mono); cursor: pointer; transition: background-color var(--d-1) var(--curva), border-color var(--d-1) var(--curva); }
.ac-chip input:checked + span { background: var(--mono); border-color: var(--mono); color: var(--blanco); }
.ac-planes { display: grid; gap: 8px; }
.ac-plan span, .ac-duro span { display: block; padding: 12px 16px 12px 48px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); color: var(--tinta-2); cursor: pointer; position: relative; line-height: 1.35; }
.ac-plan span b, .ac-duro span b { display: block; color: var(--mono); font-family: var(--titulo); font-size: 1.0625rem; }
.ac-plan span::before, .ac-duro span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--linea-fuerte); border-radius: 50%; background: var(--blanco); }
.ac-duro span::before { border-radius: 5px; }
.ac-plan input:checked + span, .ac-duro input:checked + span { border-color: var(--mono); background: var(--hielo); }
.ac-plan input:checked + span::before { border: 6px solid var(--mono); }
.ac-duro input:checked + span::before { background: var(--mono) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3 3 7-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--mono); }
.ac-chip input:focus-visible + span, .ac-plan input:focus-visible + span, .ac-duro input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.ac-calc__res { grid-area: res; background: var(--mono); color: var(--sobre-mono); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ac-res__antes { color: var(--sobre-mono-2); font-weight: 600; }
.ac-res__cifra { font-family: var(--titulo); font-weight: 700; font-size: clamp(2.5rem, 2rem + 2.4vw, 3.75rem); line-height: 1; color: var(--blanco); }
.ac-res__porque { color: var(--sobre-mono); line-height: 1.45; }
.ac-res__nota { font-size: var(--t-peque); color: var(--sobre-mono-2); }
.ac-barras { display: grid; gap: 10px; margin-block: 6px; }
.ac-barra { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: 10px; font-size: var(--t-peque); color: var(--sobre-mono-2); }
.ac-barra__pista { display: block; height: 12px; border-radius: 999px; background: var(--linea-mono); overflow: hidden; }
.ac-barra__lleno { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--sobre-mono-2); transition: width var(--d-2) var(--curva); }
.ac-barra__lleno.es-el-que-manda { background: var(--naranja); }

/* ---------- según tu coche ---------- */
.ac-coches { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ac-coche { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); padding: 20px; }
.ac-coche svg { width: 52px; height: 52px; display: block; margin-bottom: 10px; }
.ac-coche h3 { font-family: var(--titulo); font-weight: 700; font-size: 1.25rem; color: var(--mono); }
.ac-coche__dato { margin-top: 6px; font-family: var(--titulo); font-weight: 700; font-size: 1.125rem; color: var(--acento-hondo); line-height: 1.25; }
.ac-coche__ojo { margin-top: 8px; font-size: var(--t-peque); color: var(--tinta-2); line-height: 1.4; }
.ac-coche--nada { background: var(--hielo); }
.ac-i-trazo { fill: none; stroke: var(--mono); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ac-i-relleno { fill: var(--acento); }
.ac-i-letra { font: 700 15px var(--titulo); fill: var(--acento-hondo); }

/* ---------- el nivel ---------- */
.ac-pasos { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: paso; }
.ac-paso { counter-increment: paso; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); padding: 18px; position: relative; }
.ac-paso::before { content: counter(paso); position: absolute; top: 14px; left: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--naranja); color: var(--sobre-naranja, #181B1E); font: 700 1rem/30px var(--titulo); text-align: center; }
.ac-paso svg { display: block; width: 100%; max-width: 180px; height: auto; margin: 10px auto 10px; }
.ac-paso p, .ac-varilla p, .ac-testigo p, .ac-gota p { color: var(--tinta-2); line-height: 1.4; font-size: var(--t-peque); }
.ac-paso p b, .ac-varilla p b, .ac-testigo p b, .ac-gota p b { display: block; color: var(--mono); font-family: var(--titulo); font-size: 1.125rem; }
.ac-i-varilla { stroke: #9AA7B1; stroke-width: 6; stroke-linecap: round; fill: none; }
.ac-i-asa { fill: var(--naranja); }
.ac-i-aceite { fill: var(--ac-aceite); }
.ac-i-marca { stroke: var(--mono); stroke-width: 2.5; }
.ac-i-txt { font: 700 11px var(--titulo); fill: var(--mono); }
.ac-i-trapo { fill: var(--acento-suave); stroke: var(--acento-hondo); stroke-width: 2; }
.ac-i-flecha { fill: none; stroke: var(--naranja); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ac-i-suelo { stroke: var(--linea-fuerte); stroke-width: 3; stroke-linecap: round; }
.ac-varillas { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ac-varilla { border-radius: var(--radio-l); padding: 16px 18px; border: 2px solid transparent; }
.ac-varilla svg { display: block; width: 100%; max-width: 220px; height: auto; margin-bottom: 8px; }
.ac-varilla--bien { background: #E6F2EA; border-color: #1D7343; }
.ac-varilla--falta, .ac-varilla--sobra { background: #FDF0DC; border-color: #8A4B00; }

/* ---------- testigo y color ---------- */
.ac-testigos, .ac-gotas { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.ac-testigos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-gotas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-testigo { display: flex; gap: 18px; align-items: center; background: var(--mono-hondo); border-radius: var(--radio-l); padding: 18px 22px; }
.ac-testigo svg { width: 96px; height: 48px; flex: none; }
.ac-testigo p { color: var(--sobre-mono-2); }
.ac-testigo p b { color: var(--blanco); }
.ac-i-lata { fill: none; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.ac-testigo--ambar .ac-i-lata { stroke: var(--ac-ambar); filter: drop-shadow(0 0 6px rgba(229, 154, 0, .55)); }
.ac-testigo--rojo .ac-i-lata { stroke: #FF4D40; filter: drop-shadow(0 0 6px rgba(255, 77, 64, .6)); }
.ac-gota { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); padding: 18px; display: flex; gap: 16px; align-items: center; }
.ac-gota svg { width: 48px; height: 60px; flex: none; }
.ac-gota--nuevo svg path:first-child { fill: var(--ac-aceite); }
.ac-gota--viejo svg path:first-child { fill: var(--ac-viejo); }
.ac-gota--leche svg path:first-child { fill: var(--ac-leche); stroke: #B9AE96; stroke-width: 2; }
.ac-gota__brillo { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-linecap: round; }
.ac-gota--leche .ac-gota__brillo { stroke: rgba(255, 255, 255, .9); }

/* ---------- uso duro ---------- */
.ac-duros { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ac-duros li { background: var(--acento-suave); border-radius: var(--radio-l); padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; font-weight: 600; color: var(--mono); line-height: 1.3; }
.ac-duros svg { width: 40px; height: 40px; }

/* ---------- preguntas ---------- */
.ac-preguntas { margin-top: 18px; border-top: 1px solid var(--linea); max-width: 760px; }
.ac-preguntas details { border-bottom: 1px solid var(--linea); }
.ac-preguntas summary { cursor: pointer; padding: 16px 40px 16px 0; font-family: var(--titulo); font-weight: 700; font-size: 1.1875rem; color: var(--mono); list-style: none; position: relative; min-height: 44px; }
.ac-preguntas summary::-webkit-details-marker { display: none; }
.ac-preguntas summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 1.6rem; line-height: 1; color: var(--naranja); transition: transform var(--d-1) var(--curva); }
.ac-preguntas details[open] summary::after { transform: rotate(45deg); }
.ac-preguntas details p { padding: 0 0 18px; color: var(--tinta-2); max-width: 62ch; }

.ac-cuerpo .fuentes { margin-top: clamp(56px, 7vw, 96px); }

/* ---------- tamaños ---------- */
@media (max-width: 980px) {
  .ac-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-duros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ac-cabeza { grid-template-columns: 1fr; }
  .ac-calc { grid-template-columns: 1fr; grid-template-areas: "titulo" "datos" "res"; }
  .ac-varillas, .ac-gotas, .ac-testigos { grid-template-columns: 1fr; }
  .ac-duros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-coches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-coche { padding: 16px; }
}
@media (max-width: 420px) {
  .ac-pasos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-barra__lleno, .ac-chip span, .ac-preguntas summary::after { transition: none; }
}