/* ============================================================================
   Roal Talleres — hoja de estilo unica.

   Colores sacados del propio logo: el rojo es el suyo, medido sobre el fichero.
   El #EC000D es ese mismo rojo un punto mas oscuro: el original deja el texto
   blanco por debajo del minimo legible (4.17 sobre 4.5), y los botones llevan
   texto encima. En el logo se queda el original.

   Sin framework y sin build: se edita este fichero y ya esta.
   Orden: variables, base, utilidades, cabecera, y luego cada seccion en el
   mismo orden en que aparecen en index.html.
   ========================================================================= */

:root {
    /* Marca */
    --rojo: #ec000d;
    --rojo-logo: #f9000e;
    --rojo-hondo: #8b0007;
    --rojo-humo: #3a0b0e;

    /* Neutros */
    --negro: #000;
    --carbon: #0a0b0d;
    --grafito: #16181c;
    --grafito-borde: #23272e;
    --grafito-claro: #2f343d;
    --plata: #b2b3b4;

    /* Texto */
    --texto: #f4f4f5;
    --texto-tenue: #a1a1aa;
    /* #71717a se quedaba en 4.0 sobre negro, por debajo del 4.5 legible.
       Este da 6.5 y sigue leyendose como texto secundario. */
    --texto-debil: #8e8e97;

    /* Señales */
    --verde: #22c55e;

    /* Veladuras y filos. Sobre oscuro son blancos a muy baja opacidad; en claro
       tienen que ser negros, o desaparecen. Por eso son variables y no literales. */
    --velo-1: rgba(255, 255, 255, .02);
    --velo-2: rgba(255, 255, 255, .03);
    --velo-3: rgba(255, 255, 255, .05);
    --velo-4: rgba(255, 255, 255, .06);
    --filo:   rgba(255, 255, 255, .1);

    /* Superficies con vida propia */
    --barra-fondo:      rgba(0, 0, 0, .72);
    --barra-fondo-fija: rgba(0, 0, 0, .94);
    --panel-movil:      rgba(10, 11, 13, .96);
    --panel-movil-pie:  rgba(10, 11, 13, .99);
    --pendiente-texto:  #ffd9dc;
    --tarjeta-hover:    #191b20;

    /* Que el navegador pinte en oscuro lo suyo: barras de scroll, formularios. */
    color-scheme: dark;

    /* Tipografia. Del sistema: pinta sin esperar a ninguna descarga.
       Para una fuente propia basta con cambiar esta linea y anadir su <link>. */
    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Medidas */
    --ancho: 1180px;
    --ancho-lectura: 680px;
    --radio: 12px;
    --radio-s: 8px;
    --barra-alto: 68px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Que los anclajes no queden tapados por la barra fija. */
    scroll-padding-top: calc(var(--barra-alto) + 16px);
}

body {
    margin: 0;
    background: var(--negro);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: 18px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img { max-width: 100%; display: block; }

/* `hidden` tiene que ganar siempre. El atributo solo trae un display:none de la
   hoja del navegador, y cualquier clase nuestra con display:grid o block se lo
   come sin avisar. */
[hidden] { display: none !important; }
a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--rojo-logo);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Salto al contenido: invisible hasta que se tabula. Lector de pantalla y
   teclado se ahorran toda la navegacion. */
.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--rojo);
    color: #fff;
    padding: 12px 20px;
    font-weight: 700;
    text-decoration: none;
}
.saltar:focus { left: 8px; top: 8px; }

/* ---------- Utilidades ---------- */

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 20px;
}

/* El rotulo rojo en versalitas que abre cada seccion. */
.rotulo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--rojo-logo);
}

.rotulo::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--rojo);
}

.rojo { color: var(--rojo-logo); }

.entradilla {
    margin: 0 0 36px;
    color: var(--texto-tenue);
    max-width: var(--ancho-lectura);
    font-size: 18px;
}

.centrado { text-align: center; }
.entradilla-corta { margin-bottom: 28px; }
.centrado .rotulo { justify-content: center; }
.centrado .entradilla { margin-left: auto; margin-right: auto; }

h1, h2, h3 { letter-spacing: -.4px; }

h2 {
    margin: 0 0 10px;
    font-size: clamp(27px, 4.6vw, 40px);
    font-weight: 800;
    line-height: 1.15;
}

/* ---------- Botones ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 26px;
    border-radius: var(--radio-s);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.boton svg { flex: none; }
.boton:active { transform: translateY(1px); }

.boton-primario {
    background: var(--rojo);
    color: #fff;
    box-shadow: 0 6px 22px rgba(236, 0, 13, .28);
}
.boton-primario:hover {
    background: #ff1420;
    box-shadow: 0 8px 28px rgba(236, 0, 13, .42);
}

.boton-secundario { border-color: var(--grafito-claro); color: var(--texto); }
.boton-secundario:hover { border-color: var(--plata); background: var(--velo-2); }

/* Sobre la banda roja se invierte: relleno blanco y borde blanco. */
.boton-claro { background: #fff; color: var(--rojo-hondo); }
.boton-claro:hover { background: #f4f4f5; }
.boton-contorno-claro { border-color: rgba(255, 255, 255, .6); color: #fff; }
.boton-contorno-claro:hover { border-color: #fff; background: var(--filo); }

/* En movil el telefono es lo que de verdad se pulsa: que quepa el dedo. */
.boton-barra { padding: 10px 18px; font-size: 15px; }

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.centrado .acciones { justify-content: center; }

/* ---------- Cinta superior ---------- */

.cinta {
    background: var(--grafito);
    border-bottom: 1px solid var(--grafito-borde);
    font-size: 14px;
    color: var(--texto-tenue);
}

.cinta .contenedor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 22px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.cinta-datos { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.cinta a { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.cinta a:hover { color: var(--texto); }
.cinta svg { color: var(--rojo-logo); flex: none; }

/* Semaforo de abierto/cerrado. Lo pinta js/roal.js a partir del horario;
   mientras el horario siga sin rellenarse, no se muestra nada. */
.estado {
    display: none;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--texto);
}
.estado[data-estado] { display: inline-flex; }

.estado::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--texto-debil);
}
.estado[data-estado="abierto"]::before {
    background: var(--verde);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
}
.estado[data-estado="cerrado"]::before { background: var(--texto-debil); }

/* ---------- Barra de navegacion ---------- */

.barra {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--barra-fondo);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(10px);
    transition: background-color .2s ease, border-color .2s ease;
}

/* Al bajar deja de ser translucida: si no, el texto de la pagina se cuela. */
.barra.desplazada {
    background: var(--barra-fondo-fija);
    border-bottom-color: var(--grafito-borde);
}

.barra .contenedor {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--barra-alto);
}

.barra-logo { margin-right: auto; display: block; }
.barra-logo img { height: 30px; width: auto; }   /* 30 sobre el logo ya recortado = 138px de ancho */

.menu {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu a {
    display: block;
    padding: 9px 14px;
    border-radius: var(--radio-s);
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--texto-tenue);
    transition: color .14s ease, background-color .14s ease;
}
.menu a:hover { color: var(--texto); background: var(--velo-4); }

/* La seccion que se esta viendo. La marca js/roal.js. */
.menu a.activo { color: var(--texto); }
.menu a.activo::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 4px;
    background: var(--rojo);
    border-radius: 2px;
}

.abrir-menu {
    display: none;
    background: none;
    border: 1px solid var(--grafito-claro);
    border-radius: var(--radio-s);
    color: var(--texto);
    padding: 9px 11px;
    cursor: pointer;
}

/* ---------- Interruptor de modo oscuro / claro ---------- */

.tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 14px;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--grafito-claro);
    border-radius: 999px;
    color: var(--texto-tenue);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.tema:hover {
    color: var(--texto);
    border-color: var(--plata);
    background: var(--velo-2);
}

.tema:focus-visible {
    outline: 2px solid var(--rojo);
    outline-offset: 2px;
}

/* Que icono se ve lo decide el JS con el atributo `hidden`, NO este CSS.
   Si aqui hubiera un display:block por clase, le ganaria al atributo y con el
   CSS cacheado se verian los dos iconos a la vez — que es justo lo que paso. */
.tema svg { display: block; }
.tema svg[hidden] { display: none; }

/* En movil el logo ya empuja todo a la derecha con su margin-right:auto, asi que
   aqui solo hay que separarlo del hamburguesa. El corte es 780, el mismo en el
   que aparece .abrir-menu. */
@media (max-width: 780px) {
    .tema { margin-left: 0; margin-right: 8px; width: 38px; height: 38px; }
}

/* ---------- Portada ---------- */

.portada {
    position: relative;
    padding: 92px 0 76px;
    overflow: hidden;
    background:
        radial-gradient(1000px 460px at 50% -8%, rgba(236, 0, 13, .26), transparent 68%),
        linear-gradient(180deg, var(--negro), var(--carbon));
}

/* Rayado diagonal muy flojo: da textura de chapa sin pesar un solo byte. */
.portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        var(--velo-1) 0 1px,
        transparent 1px 11px
    );
    pointer-events: none;
}

.portada .contenedor { position: relative; text-align: center; }

/* `height: auto` no es opcional: el <img> lleva sus medidas reales como
   atributo y sin esto el navegador respetaria la altura del fichero. */
.portada-logo { margin: 0 auto 30px; max-width: 380px; height: auto; }

.portada h1 {
    margin: 0 0 16px;
    font-size: clamp(32px, 6.4vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.portada-texto {
    margin: 0 auto 32px;
    max-width: var(--ancho-lectura);
    color: var(--texto-tenue);
    font-size: clamp(17px, 2.3vw, 20px);
}

/* Las tres promesas bajo los botones. */
.promesas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.promesas li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid var(--grafito-borde);
    border-radius: 999px;
    background: var(--velo-2);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--texto-tenue);
}
.promesas svg { color: var(--rojo-logo); flex: none; }

/* ---------- Cinta deslizante ---------- */

.deslizante {
    display: flex;
    overflow: hidden;
    background: var(--rojo);
    color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .25);
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    padding: 11px 0;
    user-select: none;
}

.deslizante ul {
    display: flex;
    flex: none;
    gap: 34px;
    margin: 0;
    padding: 0 17px 0 0;
    list-style: none;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    white-space: nowrap;
    animation: deslizar 34s linear infinite;
}

.deslizante li { display: flex; align-items: center; gap: 34px; }
.deslizante li::after { content: "◆"; font-size: 8px; opacity: .65; }

@keyframes deslizar {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ---------- Secciones ---------- */

section { padding: 84px 0; }
.seccion-borde { border-top: 1px solid var(--grafito-borde); }
.seccion-fondo { background: var(--carbon); }

/* ---------- Cifras ---------- */

/* Van pegadas a la cinta deslizante: menos aire que una seccion normal. */
.seccion-cifras { padding: 64px 0; }

.cifras {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    background: var(--grafito-borde);
    border: 1px solid var(--grafito-borde);
    border-radius: var(--radio);
    overflow: hidden;
}

.cifra {
    background: var(--carbon);
    padding: 30px 24px;
    text-align: center;
}

.cifra b {
    display: block;
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--texto);
}

/* Hijo directo a proposito: si no, esta regla alcanza tambien al
   <span class="pendiente"> de dentro del <b> y lo encoge a 14px. */
.cifra > span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--texto-tenue);
}

/* ---------- Servicios ---------- */

.rejilla {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.tarjeta {
    position: relative;
    background: var(--grafito);
    border: 1px solid var(--grafito-borde);
    border-radius: var(--radio);
    padding: 26px 24px;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.tarjeta:hover {
    transform: translateY(-3px);
    border-color: var(--rojo);
    background: var(--tarjeta-hover);
}

.tarjeta-icono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: rgba(236, 0, 13, .12);
    border: 1px solid rgba(236, 0, 13, .3);
    color: var(--rojo-logo);
}

.tarjeta h3 {
    margin: 0 0 7px;
    font-size: 18px;
    font-weight: 700;
}

.tarjeta p {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 15.5px;
    line-height: 1.55;
}

/* Aviso bajo la rejilla de servicios. */
.nota {
    margin: 28px 0 0;
    padding: 16px 20px;
    border-left: 3px solid var(--rojo);
    background: var(--velo-2);
    border-radius: 0 var(--radio-s) var(--radio-s) 0;
    color: var(--texto-tenue);
    font-size: 15.5px;
}
.nota strong { color: var(--texto); }

/* ---------- Proceso ---------- */

.pasos {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    counter-reset: paso;
}

.paso {
    position: relative;
    padding-top: 26px;
    border-top: 2px solid var(--grafito-borde);
}

.paso::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    top: -16px;
    left: 0;
    padding-right: 12px;
    background: var(--negro);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--rojo-logo);
}

.seccion-fondo .paso::before { background: var(--carbon); }

.paso h3 { margin: 0 0 7px; font-size: 18px; font-weight: 700; }
.paso p { margin: 0; color: var(--texto-tenue); font-size: 15.5px; }

/* ---------- Por que nosotros ---------- */

.partido {
    display: grid;
    gap: 44px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
}

.ventajas { margin: 0; padding: 0; list-style: none; }

.ventajas li {
    position: relative;
    padding: 0 0 20px 38px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--grafito-borde);
}
.ventajas li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.ventajas svg {
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--rojo-logo);
}

.ventajas h3 { margin: 0 0 5px; font-size: 17px; font-weight: 700; }
.ventajas p { margin: 0; color: var(--texto-tenue); font-size: 15.5px; }

/* Ficha de garantia, con marco rojo para que destaque del resto del bloque. */
.ficha {
    background: linear-gradient(160deg, rgba(236, 0, 13, .1), var(--velo-1));
    border: 1px solid rgba(236, 0, 13, .34);
    border-radius: var(--radio);
    padding: 30px 28px;
}

.ficha h3 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 11px;
}
.ficha h3 svg { color: var(--rojo-logo); flex: none; }

.ficha p { margin: 0 0 14px; color: var(--texto-tenue); font-size: 15.5px; }
.ficha p:last-child { margin-bottom: 0; }
.ficha strong { color: var(--texto); }

.legal {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--filo);
    font-size: 15px;
    color: var(--texto-debil);
}

/* ---------- Banda de llamada ---------- */

.banda {
    background: linear-gradient(120deg, var(--rojo-hondo), var(--rojo));
    padding: 62px 0;
}

.banda .contenedor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.banda h2 { margin: 0 0 8px; color: #fff; }
.banda p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 520px; }

/* ---------- Preguntas ---------- */

.preguntas { max-width: 820px; }

.preguntas details {
    border-bottom: 1px solid var(--grafito-borde);
}

.preguntas summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    cursor: pointer;
    font-size: 17.5px;
    font-weight: 700;
    list-style: none;
    transition: color .14s ease;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary:hover { color: var(--rojo-logo); }

/* El "+" que gira a "×" al abrir. */
.preguntas summary::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 6px;
    background:
        linear-gradient(var(--rojo-logo) 0 0) center / 100% 2px no-repeat,
        linear-gradient(var(--rojo-logo) 0 0) center / 2px 100% no-repeat;
    transition: transform .2s ease;
}
.preguntas details[open] summary::after { transform: rotate(135deg); }

.preguntas details p {
    margin: 0 0 22px;
    padding-right: 34px;
    color: var(--texto-tenue);
    font-size: 16px;
}

/* ---------- Galeria del taller ----------
   Mientras no haya fotos, cada hueco es una caja punteada que dice que foto
   va ahi y con que nombre guardarla. Igual que los huecos de texto: se ve que
   falta en lugar de publicar un sitio a medias sin que nadie lo note. */

.galeria {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 44px;
}

.foto {
    margin: 0;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--grafito);
}

/* Cuando llegue la foto de verdad, el <img> ocupa la caja sin deformarse. */
.foto img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.foto-hueco {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    aspect-ratio: 4 / 3;
    padding: 22px;
    border: 1px dashed var(--rojo);
    border-radius: var(--radio);
    background: var(--rojo-humo);
    text-align: center;
}

.foto-hueco svg { color: var(--rojo-logo); }

.foto-hueco b {
    font-size: 15px;
    font-weight: 700;
    color: var(--pendiente-texto);
}

/* El nombre de fichero con el que hay que guardarla. */
.foto-hueco code {
    font-size: 12.5px;
    color: var(--texto-debil);
    word-break: break-all;
}

/* ---------- Contacto ---------- */

.contacto {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.dato { margin-bottom: 22px; }

.etiqueta {
    display: block;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--rojo-logo);
    font-weight: 800;
    margin-bottom: 5px;
}

.dato a { text-decoration: none; }
.dato a:hover { text-decoration: underline; }

.horario { list-style: none; margin: 0; padding: 0; }

.horario li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--grafito-borde);
}
.horario li:last-child { border-bottom: 0; }
.horario span:last-child { color: var(--texto-tenue); }

/* Hueco del mapa: caja punteada hasta que haya direccion que incrustar. */
.mapa {
    display: grid;
    place-items: center;
    min-height: 230px;
    margin-top: 12px;
    padding: 30px;
    border: 1px dashed var(--grafito-claro);
    border-radius: var(--radio);
    background: var(--velo-1);
    text-align: center;
    color: var(--texto-debil);
    font-size: 15px;
}
.mapa svg { color: var(--grafito-claro); margin-bottom: 12px; }

/* ---------- Aviso de dato pendiente ----------
   Se ve en rojo chillon a proposito: si algo queda sin rellenar, tiene que
   cantar en la propia web y no pasar a produccion sin que nadie lo note. */

.pendiente {
    background: var(--rojo-humo);
    border: 1px dashed var(--rojo);
    color: var(--pendiente-texto);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .9em;
    white-space: nowrap;
}

/* ---------- Pie ---------- */

footer {
    background: var(--carbon);
    border-top: 1px solid var(--grafito-borde);
    color: var(--texto-tenue);
    font-size: 15px;
}

.pie {
    display: grid;
    gap: 34px;
    grid-template-columns: 1.4fr 1fr 1fr;
    padding: 58px 0 42px;
}

.pie img { height: 32px; width: auto; margin-bottom: 16px; }
.pie h4 {
    margin: 0 0 14px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--texto);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--texto); text-decoration: underline; }
.pie p { margin: 0 0 12px; max-width: 320px; font-size: 15px; }

.pie-final {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 30px;
    border-top: 1px solid var(--grafito-borde);
    font-size: 14px;
    color: var(--texto-debil);
}
.pie-final a { text-decoration: none; }
.pie-final a:hover { text-decoration: underline; color: var(--texto-tenue); }

/* ---------- Barra de acciones en movil ----------
   Fija abajo: en un taller, llamar y WhatsApp son el 90% de las conversiones
   y en el movil tienen que estar siempre debajo del pulgar. */

.acciones-movil {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--panel-movil);
    border-top: 1px solid var(--grafito-borde);
    backdrop-filter: blur(10px);
}
.acciones-movil .boton { flex: 1; padding: 13px 10px; font-size: 15px; }

/* ---------- Burbuja de WhatsApp ----------
   Abajo a la derecha, en verde de WhatsApp y no en el rojo de la marca: es un
   icono que la gente reconoce de lejos y cambiarle el color le quita justo eso.

   No se muestra por debajo de 620 px, que es donde entra la barra fija con
   Llamar y WhatsApp: las dos a la vez se solapan y sobra una. */

.wasap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 44;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: #25d366;
    color: #0b3d1e;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
    transition: transform .16s ease, box-shadow .16s ease;
}

.wasap:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .46);
}

.wasap:focus-visible {
    outline: 3px solid var(--texto);
    outline-offset: 3px;
}

/* Al llegar al final de la pagina la burbuja se sienta justo encima de los
   enlaces del pie, que van a la derecha. Este hueco los deja libres. */
footer { padding-bottom: 82px; }

/* ---------- Aparicion al hacer scroll ---------- */

.aparece {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
}
.aparece.visible { opacity: 1; transform: none; }

/* ---------- Adaptacion a pantallas pequenas ---------- */

@media (max-width: 900px) {
    .pie { grid-template-columns: 1fr 1fr; }
    .pie > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
    .abrir-menu { display: block; }

    /* El menu pasa a panel desplegable bajo la barra. */
    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 8px;
        background: var(--panel-movil-pie);
        border-bottom: 1px solid var(--grafito-borde);
        display: none;
    }
    .menu.abierto { display: flex; }
    .menu a { padding: 13px 14px; font-size: 16px; }
    .menu a.activo::after { display: none; }

    .barra .boton-barra { display: none; }
    .cinta-datos .solo-ancho { display: none; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    section { padding: 60px 0; }

    .portada { padding: 60px 0 52px; }
    .portada-logo { max-width: 260px; }

    .acciones .boton { width: 100%; }

    .acciones-movil { display: flex; }
    /* La barra ya trae WhatsApp: la burbuja sobra y encima la taparia. */
    .wasap { display: none; }
    /* Hueco para que la barra fija no tape el final del pie. */
    footer { padding-bottom: 74px; }

    .banda { padding: 48px 0; }
    .banda .acciones { width: 100%; }

    .pie { grid-template-columns: 1fr; gap: 28px; }
}

/* Quien pide menos movimiento en el sistema, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .aparece { opacity: 1; transform: none; }
}


/* ============================================================================
   Tema claro

   La web se ve en oscuro salvo que se pida lo contrario: el interruptor de la
   barra pone data-tema="claro" en el <html> y aqui se le da la vuelta a la
   paleta. Solo se tocan las variables — ninguna regla de mas abajo sabe en que
   tema esta, y asi no hay dos hojas de estilo que mantener.

   El rojo de marca no cambia: #ec000d sobre blanco da 4,59 de contraste, por
   encima del 4,5 que hace falta para leerlo.
   ========================================================================= */

:root[data-tema="claro"] {
    --negro: #ffffff;
    --carbon: #f7f7f8;
    --grafito: #f1f2f4;
    --grafito-borde: #e2e4e8;
    --grafito-claro: #d6d9de;
    --plata: #5a5d63;

    --texto: #16181c;
    --texto-tenue: #4b4e55;
    --texto-debil: #63666d;

    --rojo-humo: #ffe8ea;

    --velo-1: rgba(0, 0, 0, .02);
    --velo-2: rgba(0, 0, 0, .035);
    --velo-3: rgba(0, 0, 0, .05);
    --velo-4: rgba(0, 0, 0, .07);
    --filo:   rgba(0, 0, 0, .12);

    --barra-fondo:      rgba(255, 255, 255, .8);
    --barra-fondo-fija: rgba(255, 255, 255, .96);
    --panel-movil:      rgba(255, 255, 255, .97);
    --panel-movil-pie:  rgba(255, 255, 255, .99);
    --pendiente-texto:  var(--rojo-hondo);
    --tarjeta-hover:    #ffffff;

    color-scheme: light;
}

/* El logo esta dibujado para fondo oscuro: la «AL» es plata y «TALLERES» es
   blanco, asi que sobre claro se pierden. Una sombra no lo arregla —lo blanco
   sigue siendo blanco—, de modo que en modo claro el logo se apoya sobre una
   placa oscura. Se ve intencionado, que es como lo resuelven las marcas con
   logotipo de un solo color.

   Lo definitivo es pedirle al diseñador una version para fondo claro, o el
   vectorial para hacerla. Mientras tanto, esto. */
:root[data-tema="claro"] .barra-logo img,
:root[data-tema="claro"] .pie img,
:root[data-tema="claro"] .portada-logo {
    background: #101216;
    border-radius: 10px;
}

:root[data-tema="claro"] .barra-logo img,
:root[data-tema="claro"] .pie img {
    padding: 6px 10px;
}

:root[data-tema="claro"] .portada-logo {
    padding: 16px 22px;
    border-radius: 16px;
}

/* ============================================================================
   Destacados pedidos en la revision del cliente
   ========================================================================= */

/* «Lo que mas nos preguntan» era una seccion mas entre otras y es de las que
   mas se leen: se le pone fondo propio, un filo rojo arriba y el titulo mayor. */
.seccion-destacada {
    background:
        radial-gradient(1200px 320px at 50% 0, rgba(236, 0, 13, .10), transparent 70%),
        var(--grafito);
    border-top: 3px solid var(--rojo);
}

.titulo-destacado {
    font-size: clamp(30px, 4.2vw, 46px);
}

.titulo-destacado::after {
    content: "";
    display: block;
    width: 68px;
    height: 4px;
    margin: 18px 0 0;   /* el titulo de esta seccion va a la izquierda, no centrado */
    border-radius: 2px;
    background: var(--rojo);
}

/* Quien es el taller: va pegado a las fotos y no debe leerse como una nota mas. */
.nota-taller {
    margin-top: 34px;
    border-left-width: 4px;
    background: var(--velo-3);
    font-size: 1.02em;
}

/* ---------- Cita previa ----------
   El formulario se abre en una ventana que pinta el propio CRM, asi que aqui
   solo hace falta colocar los botones. La ventana trae su estilo. */

.acciones-cita {
    margin-top: 26px;
    justify-content: center;
}

#reservar .nota {
    margin-top: 16px;
    text-align: center;
}