/* El sistema del sitio definitivo de Fidelis (D23 a D25): lo comparten el inicio
   (diseno-final.html) y las subpáginas (final-*.html). Lo propio de una sola página va en su <style>. */

/* Diseño final (5091, D22): el orden y la muestra del cliente del 22-10, sobre el sistema del diseño 4.
   Las secciones vienen de los cuatro diseños: valores, pasos y blog del 2; el mosaico de áreas del 1;
   la foto de la portada, el retiro y el pie del 3. Más naranjo, blanco y gris, menos negro y sin beige;
   el logo como sticker, las manchas de los valores y Fito (archivos del cliente, en assets/). */
:root {
  --naranjo: #FA8410; --naranjo-hondo: #B95700; --naranjo-claro: #FFF0E0;
  --amarillo: #FFC71A; --amarillo-claro: #FFF5D1;
  --gris: #666568; --gris-hondo: #4F4D51; --gris-claro: #F3F3F4; --gris-medio: #E3E3E6;
  --carbon: #1F1E1D; --suave: #64636A;
  --linea: #E5E5E8; --linea-tarjeta: #EBEBEE;
  --wsp: #25D366;
  --radio: 18px; --radio-boton: 12px;
  --sans: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --alto-cabecera: 84px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--carbon); background: #fff; line-height: 1.5; font-size: 16px; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p, blockquote { text-wrap: pretty; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.contenedor { width: min(1280px, 100% - 64px); margin-inline: auto; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.lleno { fill: currentColor; stroke: none; }

/* El patrón de la marca de fondo, apenas visible */
.patron { position: relative; isolation: isolate; }
.patron::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/patron-negro.svg") 0 0 / 200px auto repeat; opacity: .055; }
.patron.blanco::before { background-image: url("../img/patron-blanco.svg"); opacity: .1; }

/* El logo como sticker: el sello circular con un borde blanco */
.sello { display: inline-block; flex: none; border-radius: 50%; background: #fff; padding: 4px;
  box-shadow: 0 10px 22px -10px rgba(31,30,29,.5), 0 0 0 1px rgba(31,30,29,.05); }
.sello img { width: 100%; height: 100%; }

/* Botones: píldora con el cuadrado del ícono pegado a la derecha */
.btn { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 6px 6px 6px 22px; border-radius: var(--radio-boton);
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background .25s, color .25s; }
.btn .cuadro { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: var(--naranjo); color: #fff; flex: none; }
.btn .cuadro .ic { width: 18px; height: 18px; stroke-width: 2; transition: transform .35s ease; }
.btn:hover .cuadro .ic.flecha { transform: rotate(45deg); }
.btn .cuadro .ic.lleno { width: 20px; height: 20px; }
.btn.blanco { background: #fff; color: var(--carbon); }
.btn.naranjo { background: var(--naranjo); color: #fff; }
.btn.naranjo .cuadro { background: #fff; color: var(--naranjo); }
.btn.naranjo:hover { background: #E87600; }
.btn.gris { background: var(--gris-claro); color: var(--carbon); }
.btn.gris:hover { background: var(--gris-medio); }
.btn.vidrio { padding: 0 20px 0 22px; gap: 10px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn.vidrio:hover { background: rgba(255,255,255,.2); }
.btn.vidrio .ic { width: 18px; height: 18px; stroke-width: 2; }
.btn.chico { min-height: 46px; padding: 5px 5px 5px 18px; font-size: 14.5px; gap: 14px; }
.btn.chico .cuadro { width: 36px; height: 36px; border-radius: 8px; }

/* Cejas, títulos y bajadas */
.ceja { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--carbon); }
.ceja::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--naranjo); flex: none; }
.ceja.clara { color: rgba(255,255,255,.88); }
.ceja.en-naranjo::before { background: #fff; }
.titulo { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.08; letter-spacing: -.032em; font-weight: 500; margin-top: 18px; }
.bajada { font-size: 17px; color: var(--suave); margin-top: 16px; max-width: 54ch; }
.centrado { text-align: center; }
.centrado .bajada { margin-inline: auto; }
.cab-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.enlace-flecha .ic { width: 18px; height: 18px; color: var(--naranjo); stroke-width: 2; transition: transform .3s; }
a:hover > .enlace-flecha .ic.flecha, .enlace-flecha:hover .ic.flecha { transform: translate(2px, -2px); }
.chip-claro { width: 46px; height: 46px; border-radius: 50%; background: var(--naranjo-claro); color: var(--naranjo); display: grid; place-items: center; flex: none; }
.chip-claro .ic { width: 22px; height: 22px; }
.marca-ejemplo { align-self: flex-start; font-size: 11.5px; font-weight: 500; color: var(--naranjo-hondo); background: var(--naranjo-claro); border-radius: 6px; padding: 4px 9px; }
.flechas { display: flex; gap: 12px; }
.flechas button { width: 46px; height: 46px; border-radius: 50%; background: var(--gris-claro); color: var(--carbon); display: grid; place-items: center; transition: background .2s, color .2s; }
.flechas button:hover { background: var(--naranjo); color: #fff; }
.flechas button.llena { background: var(--naranjo); color: #fff; }
.flechas .ic { width: 18px; height: 18px; stroke-width: 2; }

/* Cabecera blanca, fija, con el logo original */
.cabecera { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { height: var(--alto-cabecera); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.logo { justify-self: start; }
.logo img { height: 46px; width: auto; }
.menu { display: flex; gap: clamp(20px, 2.4vw, 36px); font-size: 14.5px; white-space: nowrap; color: #4A4945; }
.menu a { transition: color .2s; }
.menu a:hover { color: var(--naranjo); }
.cabecera-acciones { justify-self: end; display: flex; align-items: center; gap: 10px; }
.boton-menu { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--linea); place-items: center; }
.menu-movil { display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; background: #fff; border: 1px solid var(--linea);
  border-radius: 14px; padding: 10px; flex-direction: column; box-shadow: 0 30px 50px -20px rgba(31,30,29,.35); }
.menu-movil a { padding: 13px 14px; border-radius: 10px; font-size: 16px; }
.menu-movil a:hover { background: var(--gris-claro); }
.cabecera.abierta .menu-movil { display: flex; }

/* El botón «Resultados» y su panel con los tres accesos de TenmaVet, en todas las páginas (D29) */
.resultados-menu { position: relative; }
.boton-resultados .cuadro .ic { transform: rotate(90deg); transition: transform .25s; }
.boton-resultados[aria-expanded="true"] .cuadro .ic { transform: rotate(-90deg); }
.panel-resultados { position: absolute; right: 0; top: calc(100% + 12px); width: 320px; z-index: 40; background: #fff; border: 1px solid var(--linea);
  border-radius: 16px; padding: 10px; box-shadow: 0 30px 50px -20px rgba(31,30,29,.35); }
.panel-resultados[hidden] { display: none; }
.panel-titulo { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); padding: 8px 10px 10px; }
.acceso-panel { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 11px; font-size: 15px; font-weight: 500; transition: background .2s; }
.acceso-panel:hover { background: var(--gris-claro); }
.acceso-panel .ic { width: 20px; height: 20px; color: var(--naranjo); }
.acceso-panel .ir { margin-left: auto; width: 17px; height: 17px; color: var(--suave); stroke-width: 2; }
.panel-ayuda { display: block; margin-top: 6px; padding: 12px; border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--suave); }
.panel-ayuda span { color: var(--naranjo-hondo); font-weight: 500; }

/* Portada: carrusel de fotos de mascotas bajo la cabecera */
.portada { position: relative; min-height: calc(var(--alto-pantalla, 100vh) - var(--alto-cabecera)); color: #fff; background: #2B2927;
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.carrusel { position: absolute; inset: 0; z-index: -2; }
.carrusel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.carrusel img.activa { opacity: 1; }
/* El schnauzer mira de frente con la cara al 37 % de la foto: reflejada, queda a la derecha del título */
.carrusel img.espejo { transform: scaleX(-1); }
.portada::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(31,30,29,.82) 0%, rgba(31,30,29,.6) 34%, rgba(31,30,29,.1) 62%, rgba(31,30,29,.04) 100%),
    linear-gradient(180deg, rgba(31,30,29,.3) 0%, rgba(31,30,29,0) 22%, rgba(31,30,29,0) 66%, rgba(31,30,29,.5) 100%); }
.portada-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 56px; align-items: end; padding: 64px 0 56px; }
.respaldo { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); font-size: 13.5px; color: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.respaldo .sello { width: 38px; height: 38px; padding: 3px; }
.respaldo b { font-weight: 600; color: #fff; }
.portada h1 { font-size: clamp(52px, 6.1vw, 88px); line-height: .98; letter-spacing: -.045em; font-weight: 500; margin-top: 26px; }
.portada h1 em { display: block; font-style: normal; color: var(--naranjo); }
.portada .lema { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; letter-spacing: -.018em; color: rgba(255,255,255,.95); margin-top: 22px; }
.portada .lema em { font-style: normal; color: var(--naranjo); }
.datos-portada { display: flex; flex-wrap: wrap; row-gap: 14px; margin-top: 30px; }
.datos-portada li { display: flex; flex-direction: column; padding: 2px 26px; border-left: 1px solid rgba(255,255,255,.38); }
.datos-portada li:first-child { padding-left: 0; border-left: 0; }
.datos-portada b { font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.datos-portada span { font-size: 13px; color: rgba(255,255,255,.74); margin-top: 4px; }
.portada .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.puntos { display: flex; gap: 8px; margin-top: 40px; }
.puntos button { width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.42); transition: width .3s, background .3s; }
.puntos button.activo { width: 46px; background: #fff; }

/* La tarjeta de resultados, con leve transparencia sobre la foto */
.tarjeta-vidrio { border-radius: 18px; padding: 26px 24px 20px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); }
.tarjeta-vidrio h2 { font-size: 23px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.tarjeta-vidrio > p { font-size: 14px; color: rgba(255,255,255,.76); margin-top: 4px; }
.campo-etiqueta { display: block; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.66); margin: 20px 0 10px; }
.acceso-campo { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border-radius: 11px; font-size: 15px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); transition: background .2s, border-color .2s; }
.acceso-campo + .acceso-campo { margin-top: 9px; }
.acceso-campo:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); }
.acceso-campo .ic { color: var(--naranjo); width: 20px; height: 20px; }
.acceso-campo .ir { margin-left: auto; color: rgba(255,255,255,.72); width: 17px; height: 17px; stroke-width: 2; }
.boton-envio { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border-radius: 11px;
  background: var(--naranjo); color: #fff; font-weight: 600; font-size: 15px; margin-top: 18px; transition: background .2s; }
.boton-envio:hover { background: #E87600; }
.boton-envio .ic { width: 20px; height: 20px; }
.tarjeta-vidrio small { display: block; font-size: 12.5px; color: rgba(255,255,255,.68); margin-top: 12px; text-align: center; }

/* El laboratorio: la frase grande sobre el patrón, con las palabras clave en naranjo */
.sobre { background: var(--gris-claro); padding: 120px 0; overflow: hidden; }
.frase { font-size: clamp(28px, 3vw, 44px); line-height: 1.22; letter-spacing: -.024em; font-weight: 500; max-width: 980px; margin: 22px 0 0; color: #3B3A38; }
.frase em { font-style: normal; color: var(--naranjo); }
.sobre-acciones { display: flex; justify-content: flex-start; align-items: center; gap: 36px; margin-top: 42px; flex-wrap: wrap; }
.insignia-dato { display: flex; align-items: center; gap: 14px; text-align: left; font-size: 14.5px; line-height: 1.35; color: var(--suave); }
.insignia-dato .sello { width: 60px; height: 60px; }
.insignia-dato b { display: block; color: var(--carbon); font-weight: 600; font-size: 16px; }
.insignia-dato strong { color: var(--carbon); font-weight: 600; }

/* Nuestros valores: las tarjetas como manchas con un contorno corrido, y Fito asomándose */
.valores { padding: 120px 0 64px; position: relative; overflow: hidden; }
.fito-asoma { position: absolute; right: -58px; top: 104px; width: 240px; transform: rotate(-16deg); pointer-events: none; }
.valores-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 64px; }
.valores-col { display: grid; gap: 34px; }
.valores-col:first-child .mancha:nth-child(2) { margin-left: 54px; }
.valores-col:last-child .mancha:nth-child(2) { margin-right: 54px; }
.mancha { position: relative; isolation: isolate; padding: 30px 40px 32px; min-height: 160px; display: flex; flex-direction: column; justify-content: center; }
/* La forma: un relleno irregular y un contorno corrido, en SVG, como en la muestra del cliente (D27).
   Los trazados los dibuja herramientas/manchas.py; se estiran a la tarjeta y el contorno no engorda */
.mancha .forma { position: absolute; left: -18px; top: -10px; width: calc(100% + 36px); height: calc(100% + 20px); z-index: -1; overflow: visible; pointer-events: none; }
/* Tamaños distintos, como en la muestra: alta y angosta, ancha y baja, o media */
.mancha.alta { width: 84%; min-height: 196px; }
.mancha.ancha { min-height: 140px; }
.mancha.media { width: 94%; min-height: 176px; }
.valores-col:last-child .mancha { justify-self: end; }
.mancha .forma .relleno { fill: var(--relleno); }
.mancha .forma .trazo { fill: none; stroke: var(--trazo); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mancha h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.mancha p { font-size: 14.5px; line-height: 1.45; margin-top: 6px; max-width: 30ch; }
.m-naranjo { --relleno: var(--naranjo); --trazo: var(--amarillo); }
.m-amarillo { --relleno: var(--amarillo); --trazo: var(--gris); }
.m-gris { --relleno: #DCDCDF; --trazo: var(--amarillo); }
.valores-foto { border-radius: 32px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--gris-claro); }
.valores-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Exámenes para cada necesidad: el mosaico de áreas (del diseño 1) */
.areas { padding: 64px 0 120px; }
.bento { display: grid; grid-template-columns: 1fr .82fr 1fr; gap: 16px; margin-top: 52px; }
.bento-col { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 214px 214px; gap: 16px; }
.bento-col .ancha { grid-column: 1 / -1; }
.foto-tarjeta { position: relative; border-radius: 22px; overflow: hidden; background: var(--gris-claro); }
.foto-tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.foto-tarjeta:hover img { transform: scale(1.04); }
.pestana { position: absolute; right: 0; bottom: 0; background: #fff; border-radius: 16px 0 0 0; padding: 12px 18px 10px 20px; font-size: 15px; font-weight: 500; }
.bento-centro { background: var(--gris-medio); border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center; padding: 34px 28px 28px; gap: 22px; }
.bento-centro .sello { width: 96px; height: 96px; }
.bento-centro p { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.22; letter-spacing: -.02em; font-weight: 500; }
.bento-centro .mas { color: var(--naranjo); }
.bento-centro .btn { width: 100%; justify-content: space-between; }

/* Exámenes con su tiempo de respuesta: tarjetas sobre burbujas, huellas y Fito */
.examenes { background: var(--gris-claro); padding: 120px 0; position: relative; overflow: hidden; isolation: isolate; }
.deco { position: absolute; z-index: -1; pointer-events: none; }
.burbuja { border-radius: 50%; }
.b1 { width: 460px; height: 460px; left: -170px; top: -150px; background: radial-gradient(circle at 40% 40%, rgba(255,199,26,.6), rgba(255,199,26,0) 68%); }
.b2 { width: 560px; height: 560px; right: -200px; bottom: -240px; background: radial-gradient(circle, rgba(250,132,16,.24), rgba(250,132,16,0) 66%); }
.b3 { width: 92px; height: 92px; border: 2.5px solid var(--amarillo); right: 23%; top: 64px; }
.b4 { width: 30px; height: 30px; background: var(--naranjo); right: 21%; top: 142px; }
.b5 { width: 58px; height: 58px; border: 2.5px solid var(--naranjo); left: -22px; top: 46%; }
.b6 { width: 18px; height: 18px; background: var(--amarillo); left: 30px; top: 38%; }
.huella-deco { width: 46px; height: 46px; color: var(--naranjo); opacity: .2; }
.hd1 { left: 47%; top: 70px; transform: rotate(-22deg); }
.hd2 { left: 52%; top: 112px; transform: rotate(-8deg); width: 34px; height: 34px; }
.hd3 { right: 18px; bottom: 132px; transform: rotate(18deg); color: var(--gris); }
.fito-examenes { right: max(32px, calc((100% - 1280px) / 2 - 10px)); top: 56px; width: 168px; transform: rotate(7deg); z-index: 0; }
.examenes .cab-fila { padding-right: 190px; }
.examenes-grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; position: relative; z-index: 1; }
.examen { background: #fff; border: 1px solid var(--linea-tarjeta); border-radius: 22px; padding: 24px; display: flex; flex-direction: column;
  min-height: 272px; transition: transform .3s, box-shadow .3s; }
.examen:hover { transform: translateY(-4px); box-shadow: 0 26px 42px -26px rgba(31,30,29,.32); }
.examen-cab { display: flex; justify-content: space-between; align-items: flex-start; }
.burbuja-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--b); color: var(--bc); }
.burbuja-ic .ic { width: 24px; height: 24px; }
.c-naranjo { --b: var(--naranjo); --bc: #fff; }
.c-amarillo { --b: var(--amarillo); --bc: var(--carbon); }
.c-gris { --b: var(--gris-medio); --bc: var(--gris-hondo); }
.cuenta { font-size: 12.5px; font-weight: 500; color: var(--suave); background: var(--gris-claro); border-radius: 999px; padding: 5px 11px; }
.examen h3 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; margin-top: 30px; }
.examen .tiempo { font-size: 15px; font-weight: 600; margin-top: 8px; }
.examen .muestra { font-size: 14px; color: var(--suave); margin-top: 2px; flex: 1; }
.examen .enlace-flecha { margin-top: 18px; font-size: 14px; }
.examenes-pie { display: flex; align-items: center; gap: 28px; margin-top: 36px; position: relative; z-index: 1; }
.examenes-pie p { max-width: 46ch; font-size: 15px; color: var(--suave); }
.examenes-pie .raya { flex: 1; height: 1px; background: var(--gris-medio); }

/* Cómo enviar una muestra: tres pasos en tarjetas, sobre el amarillo de la marca */
.pasos { background: var(--amarillo); padding: 120px 0; overflow: hidden; }
.pasos.patron::before { background-image: url("../img/patron-blanco.svg"); opacity: .3; }
.pasos-grilla { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 64px; align-items: start; }
.pasos .titulo { font-size: clamp(40px, 4.4vw, 62px); line-height: 1.02; }
.pasos .bajada { color: rgba(31,30,29,.74); }
.tutor { background: #fff; border-radius: 22px; padding: 26px 28px; margin-top: 44px; max-width: 470px; box-shadow: 0 24px 40px -30px rgba(31,30,29,.45); }
.tutor h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.tutor > p { font-size: 15px; color: var(--suave); margin-top: 6px; }
.tutor .btn { margin-top: 18px; }
.fito-pasos { width: 150px; margin-top: 30px; margin-left: 12px; transform: rotate(-8deg); }
.paso { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 22px; background: #fff; border-radius: 24px; padding: 14px;
  box-shadow: 0 26px 40px -30px rgba(31,30,29,.5); }
.paso + .paso { margin-top: 16px; }
.paso-foto { border-radius: 16px; overflow: hidden; min-height: 196px; background: var(--gris-claro); }
.paso-foto img { width: 100%; height: 100%; object-fit: cover; }
.paso-cuerpo { padding: 10px 12px 10px 2px; display: flex; flex-direction: column; }
.paso-num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 16px; background: var(--b); color: var(--bc); }
.paso h3 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; margin-top: 14px; }
.paso p { font-size: 15px; color: var(--suave); margin-top: 6px; }
.paso p.nota { color: var(--naranjo-hondo); font-weight: 500; margin-top: 8px; }
.paso .enlace-flecha { margin-top: auto; padding-top: 14px; }

/* Testimonios: una foto grande y la tarjeta con el dato, la cita y quién la dice */
.historias { padding: 120px 0; }
.historias-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.historias-control { display: flex; align-items: center; gap: 20px; }
.contador { font-size: 13px; color: var(--suave); letter-spacing: .1em; }
.historia { display: none; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 48px; }
.historia.activa { display: grid; }
.historia-foto { position: relative; border-radius: 24px; overflow: hidden; min-height: 460px; background: var(--gris-claro); }
.historia-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.historia-tarjeta { background: var(--gris-claro); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; }
.historia-tarjeta .dato strong { display: block; font-size: 52px; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--naranjo); }
.historia-tarjeta .dato span { display: block; font-size: 15px; color: var(--suave); margin-top: 8px; }
.historia-tarjeta .marca-ejemplo { margin-top: 28px; }
.historia-tarjeta blockquote { font-size: 21px; line-height: 1.45; letter-spacing: -.01em; margin-top: 16px; flex: 1; }
.historia-autor { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--gris-medio); font-size: 15px; font-weight: 500; }
.historia-autor .avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--naranjo); flex: none; }
.historia-autor .avatar .ic { width: 20px; height: 20px; }
.historia-autor small { display: block; font-size: 13.5px; font-weight: 400; color: var(--suave); }

/* Blog (del diseño 2) */
.blog { background: var(--gris-claro); padding: 120px 0; }
.blog-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.nota-blog { background: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.nota-blog:hover { transform: translateY(-4px); box-shadow: 0 26px 42px -28px rgba(31,30,29,.32); }
.nota-foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gris-claro); }
.nota-foto img { width: 100%; height: 100%; object-fit: cover; }
.nota-cuerpo { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.etiqueta { align-self: flex-start; font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: var(--naranjo-claro); color: var(--naranjo-hondo); }
.etiqueta.vet { background: var(--amarillo-claro); color: #7A5A00; }
.nota-blog h3 { font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; margin-top: 14px; flex: 1; }
.nota-blog .enlace-flecha { margin-top: 20px; font-size: 14.5px; }

/* Retiro de muestras: el llamado en naranjo con la foto (del diseño 3) */
.retiro { padding: 120px 0; }
.retiro-tarjeta { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); border-radius: 28px; overflow: hidden; background: var(--naranjo); min-height: 420px; }
.retiro-texto { padding: 60px 56px 54px; display: flex; flex-direction: column; justify-content: center; }
.retiro-texto.patron::before { background-image: url("../img/patron-blanco.svg"); opacity: .14; }
.retiro-texto h2 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; margin-top: 16px; }
.retiro-texto > p { font-size: 17px; max-width: 42ch; margin-top: 16px; color: rgba(31,30,29,.82); }
.retiro-acciones { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.tel { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.tel .ic { width: 20px; height: 20px; }
.retiro-foto { position: relative; min-height: 320px; }
.retiro-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Preguntas frecuentes: franja gris con el patrón */
.faq { background: var(--gris); color: #fff; padding: 120px 0 110px; overflow: hidden; }
.faq-grilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; }
.faq .titulo { color: #fff; }
.faq .bajada { color: rgba(255,255,255,.8); }
.faq-lado { display: flex; flex-direction: column; }
.ayuda { margin-top: auto; padding-top: 48px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ayuda .sello { width: 64px; height: 64px; }
.pregunta { background: #fff; color: var(--carbon); border-radius: 16px; }
.pregunta + .pregunta { margin-top: 12px; }
.pregunta summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px 20px 24px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; }
.pregunta summary::-webkit-details-marker { display: none; }
.signo { width: 38px; height: 38px; border-radius: 50%; background: var(--naranjo); color: #fff; display: grid; place-items: center; flex: none; transition: transform .3s; }
.signo .ic { width: 18px; height: 18px; stroke-width: 2; }
.pregunta[open] .signo { transform: rotate(45deg); }
.respuesta { padding: 0 24px 24px; font-size: 15.5px; color: var(--suave); max-width: 62ch; }
.respuesta a { color: var(--carbon); text-decoration: underline; text-decoration-color: var(--naranjo); text-underline-offset: 3px; }

/* Contacto: los datos en tarjetas y el mapa */
.contacto { padding: 120px 0; }
.contacto-grilla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; margin-top: 48px; align-items: stretch; }
.datos { display: grid; gap: 12px; align-content: start; }
.dato-contacto { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 16px; background: var(--gris-claro); border: 1px solid transparent; transition: border-color .2s; }
a.dato-contacto:hover { border-color: var(--naranjo); }
.dato-contacto .chip-claro { background: #fff; }
.dato-contacto b { display: block; font-weight: 500; font-size: 16px; }
.dato-contacto > span:last-child span { display: block; font-size: 14.5px; color: var(--suave); margin-top: 2px; overflow-wrap: anywhere; }
.mapa { border-radius: 24px; overflow: hidden; min-height: 470px; background: var(--gris-claro); }
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 470px; border: 0; }

/* Sección final: el pie claro con las tres descargas */
.pie { background: #F7F7F8; border-top: 1px solid var(--linea); }
.pie-medio { display: grid; grid-template-columns: 1.45fr .8fr .95fr .9fr 1.35fr; gap: 40px; padding: 84px 0 56px; }
.pie-marca > img { height: 50px; width: auto; }
.pie-marca > p { color: var(--suave); font-size: 15px; margin-top: 18px; max-width: 34ch; }
.descargas { display: grid; gap: 10px; margin-top: 26px; max-width: 380px; }
.descarga { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 6px 6px 6px 14px;
  font-size: 14.5px; font-weight: 500; transition: border-color .2s; }
.descarga:hover { border-color: var(--naranjo); }
.descarga small { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--naranjo-hondo); background: var(--naranjo-claro); border-radius: 6px; padding: 3px 6px; }
.descarga .txt { flex: 1; }
.descarga .cuadro { width: 38px; height: 38px; border-radius: 9px; background: var(--naranjo); color: #fff; display: grid; place-items: center; flex: none; }
.descarga .cuadro .ic { width: 18px; height: 18px; stroke-width: 2; }
.pie-ayuda { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 14.5px; color: var(--suave); line-height: 1.3; }
.pie-ayuda .sello { width: 56px; height: 56px; }
.pie-ayuda b { display: block; font-size: 18px; font-weight: 600; color: var(--carbon); }
.pie-col h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--suave); }
.pie-col ul { margin-top: 18px; display: grid; gap: 11px; font-size: 15px; }
.pie-col a { color: var(--carbon); overflow-wrap: anywhere; transition: color .2s; }
.pie-col a:hover { color: var(--naranjo); }
.pie-col .texto { color: var(--suave); font-size: 14.5px; }
.pie-col .con-ic { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pie-col .con-ic .ic { width: 18px; height: 18px; color: var(--naranjo); }
.redes { display: flex; gap: 10px; margin-top: 4px; }
.redes a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; display: grid; place-items: center; }
.redes a:hover { border-color: var(--naranjo); }
.redes .ic { width: 19px; height: 19px; }
/* La barra final: el crédito de Softem a la derecha, con aire para el botón flotante de WhatsApp */
.pie-bajo { border-top: 1px solid var(--linea); padding: 22px 96px 30px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--suave); }
.pie-bajo a { color: var(--carbon); }
.pie-bajo a:hover { color: var(--naranjo); }
.pie-bajo .credito { margin-left: auto; }

/* En un celular angosto, el WhatsApp de la cabecera deja su lugar al botón «Resultados»: el flotante lo reemplaza */
@media (max-width: 420px) { .cabecera .btn.naranjo.chico { display: none; } }

/* El aviso de lo que todavía no está (un PDF pendiente o el envío del formulario), abajo al centro */
.aviso { position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translate(-50%, 16px); width: max-content; max-width: min(520px, calc(100% - 120px));
  background: var(--gris-hondo); color: #fff; font-size: 14.5px; line-height: 1.4; padding: 13px 18px; border-radius: 12px;
  box-shadow: 0 18px 36px -16px rgba(31,30,29,.55); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* Botón flotante de WhatsApp: aparece al bajar (al cargar taparía la tarjeta de la portada) */
.whatsapp-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--wsp); color: #fff;
  display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); transition: transform .25s, opacity .25s; }
.whatsapp-flotante:hover { transform: scale(1.06); }
.whatsapp-flotante .ic { width: 30px; height: 30px; }
.whatsapp-flotante.oculto { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* Entradas animadas: en el lienzo se ven de entrada */
.aparece { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.aparece.visible { opacity: 1; transform: none; }
.en-lienzo .aparece { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  .carrusel img { transition: none; }
}

@media (max-width: 1240px) {
  .cabecera .btn.naranjo.chico { padding: 0; gap: 0; font-size: 0; min-height: 0; background: none; }
  .cabecera .btn.naranjo.chico .cuadro { width: 44px; height: 44px; border-radius: 10px; background: var(--naranjo); color: #fff; }
  .pie-medio { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .pie-marca { grid-column: 1 / -1; }
  .examenes-grilla { grid-template-columns: repeat(2, 1fr); }
  .valores-grilla { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 280px) minmax(0, 1fr); }
  .valores-col:first-child .mancha:nth-child(2) { margin-left: 28px; }
  .valores-col:last-child .mancha:nth-child(2) { margin-right: 28px; }
}
@media (max-width: 1100px) {
  .portada-cuerpo { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
  .menu { gap: 18px; font-size: 14px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-centro { grid-column: 1 / -1; order: -1; flex-direction: row; text-align: left; padding: 28px 30px; }
  .bento-centro p { flex: 1; }
  .bento-centro .btn { width: auto; }
  .pasos-grilla, .faq-grilla { gap: 44px; }
  .paso { grid-template-columns: 150px minmax(0, 1fr); }
  .paso-foto { min-height: 170px; }
  .fito-asoma { width: 190px; right: -70px; }
}
/* La cabecera pasa al menú de celular bajo 940 px: con el botón «Resultados», el menú completo y los dos
   botones no caben, y el logo se achataba (medido el 27-10) */
@media (max-width: 940px) {
  .cabecera .contenedor { grid-template-columns: 1fr auto; }
  .menu { display: none; }
  .boton-menu { display: grid; }
}
@media (max-width: 880px) {
  :root { --alto-cabecera: 66px; }
  .contenedor { width: calc(100% - 32px); }
  .cabecera .contenedor { grid-template-columns: 1fr auto; }
  .menu { display: none; }
  .logo img { height: 36px; }
  .boton-menu { display: grid; }
  .portada::before { background: linear-gradient(180deg, rgba(31,30,29,.3) 0%, rgba(31,30,29,.5) 38%, rgba(31,30,29,.86) 70%, rgba(31,30,29,.94) 100%); }
  .portada-cuerpo { grid-template-columns: 1fr; gap: 28px; padding: 150px 0 28px; }
  .portada h1 { font-size: 46px; margin-top: 20px; }
  .portada .lema { font-size: 22px; }
  .datos-portada li { padding: 2px 16px; }
  .datos-portada b { font-size: 17px; }
  .portada .botones { flex-direction: column; align-items: stretch; }
  .portada .botones .btn { justify-content: space-between; }
  .portada .botones .btn.vidrio { justify-content: center; min-height: 52px; }
  .sobre, .examenes, .pasos, .historias, .blog, .retiro, .contacto { padding: 88px 0; }
  .valores { padding: 88px 0 40px; }
  .areas { padding: 40px 0 88px; }
  .faq { padding: 88px 0 72px; }
  .valores-grilla { grid-template-columns: 1fr; }
  .valores-col:first-child .mancha:nth-child(2), .valores-col:last-child .mancha:nth-child(2) { margin: 0; }
  .valores-col:first-child .mancha, .valores-col:last-child .mancha { width: 100%; max-width: 460px; justify-self: center; }
  .mancha { padding: 32px 13%; }
  .mancha .forma { left: 0; top: 0; width: 100%; height: 100%; }
  .valores-foto { aspect-ratio: 4 / 3; }
  .fito-asoma { display: none; }
  .examenes .cab-fila { padding-right: 0; }
  .fito-examenes { display: none; }
  .pasos-grilla, .contacto-grilla, .faq-grilla, .retiro-tarjeta { grid-template-columns: 1fr; }
  .historia { grid-template-columns: 1fr; }
  .historia-foto { min-height: 300px; }
  .blog-grilla { grid-template-columns: 1fr; }
  .retiro-texto { padding: 44px 28px; }
  .ayuda { padding-top: 32px; }
  .examenes-pie { flex-wrap: wrap; gap: 16px; }
  .examenes-pie .raya { display: none; }
  .mapa, .mapa iframe { min-height: 340px; }
}
@media (max-width: 560px) {
  .boton-resultados { padding: 0 5px 0 14px; gap: 8px; min-height: 44px; font-size: 14px; }
  .boton-resultados .cuadro { width: 34px; height: 34px; }
  .panel-resultados { position: fixed; top: calc(var(--alto-cabecera) + 8px); left: 16px; right: 16px; width: auto; }
  .titulo { font-size: 32px; }
  .bajada { font-size: 16px; }
  .frase { font-size: 24px; }
  .btn { white-space: normal; text-align: left; }
  /* En el celular el inicio se acorta (D29): las áreas en dos columnas, las tarjetas de tiempos en una fila
     que se desliza con el dedo y los pasos con la foto chica al lado */
  .bento { grid-template-columns: 1fr; }
  .bento-col { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 132px; }
  .pestana { font-size: 13.5px; padding: 9px 12px 8px 14px; }
  .bento-centro { flex-direction: column; text-align: center; }
  .examenes-grilla { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .examenes-grilla::-webkit-scrollbar { display: none; }
  .examen { min-height: 0; scroll-snap-align: start; }
  .paso { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .paso-foto { min-height: 0; height: 76px; border-radius: 12px; }
  .paso-cuerpo { padding: 0 4px 4px 0; }
  .historia-tarjeta { padding: 26px 22px; }
  .historia-tarjeta .dato strong { font-size: 40px; }
  .historia-tarjeta blockquote { font-size: 18px; }
  .pregunta summary { font-size: 16px; padding: 18px 16px 18px 18px; }
  .respuesta { padding: 0 18px 20px; font-size: 15px; }
  .pie-medio { grid-template-columns: 1fr; gap: 36px; padding: 64px 0 44px; }
  .pie-bajo { padding-right: 76px; }
}

/* ---- Las subpáginas (D24): lo que comparten las páginas internas ---- */

/* El menú marca la página en la que se está */
.menu a[aria-current="page"] { color: var(--naranjo); }
.menu-movil a[aria-current="page"] { color: var(--naranjo-hondo); background: var(--naranjo-claro); }

/* La cabecera de página: migas, ceja, título y bajada sobre el gris claro con el patrón, y la foto al lado */
.cabecera-pagina { background: var(--gris-claro); padding: 64px 0 76px; overflow: hidden; }
.cabecera-pagina > .contenedor { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: center; }
.cabecera-pagina.sin-foto > .contenedor { grid-template-columns: minmax(0, 1fr); }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; color: var(--suave); margin-bottom: 30px; }
.migas a { transition: color .2s; }
.migas a:hover { color: var(--naranjo); }
.migas .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gris-medio); }
.migas [aria-current] { color: var(--carbon); }
.cabecera-pagina h1 { font-size: clamp(42px, 4.7vw, 66px); line-height: 1.02; letter-spacing: -.038em; font-weight: 500; margin-top: 18px; }
.cabecera-pagina h1 em { font-style: normal; color: var(--naranjo); }
.cabecera-pagina .bajada { font-size: 18px; max-width: 50ch; margin-top: 18px; }
.cabecera-pagina .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cabecera-foto { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gris-medio); }
.cabecera-foto img { width: 100%; height: 100%; object-fit: cover; }
.cabecera-foto .sello { position: absolute; left: 20px; bottom: 20px; width: 76px; height: 76px; }

/* Un bloque de contenido de una subpágina, con su fondo. .sin-arriba cuando sigue a otro del mismo fondo */
.bloque { padding: 120px 0; }
.bloque.gris { background: var(--gris-claro); }
.bloque.sin-arriba { padding-top: 0; }
.bloque-cab { margin-bottom: 52px; }

/* Texto largo: el artículo del blog y la privacidad */
.prosa { max-width: 70ch; font-size: 17px; line-height: 1.7; color: #3B3A38; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.022em; font-weight: 500; color: var(--carbon); margin-top: 2em; scroll-margin-top: calc(var(--alto-cabecera) + 24px); }
.prosa h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; color: var(--carbon); margin-top: 1.6em; }
.prosa ul li { position: relative; padding-left: 22px; }
.prosa ul li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--naranjo); }
.prosa ol { list-style: decimal; padding-left: 1.3em; }
.prosa ol li::marker { color: var(--naranjo-hondo); font-weight: 600; }
.prosa li + li { margin-top: .5em; }
.prosa a { color: var(--carbon); text-decoration: underline; text-decoration-color: var(--naranjo); text-underline-offset: 3px; }
.prosa strong { color: var(--carbon); font-weight: 600; }
.prosa blockquote { border-left: 3px solid var(--naranjo); padding: 4px 0 4px 22px; font-size: 20px; line-height: 1.5; color: var(--carbon); }
.prosa figure img { width: 100%; border-radius: 18px; }
.prosa figcaption { font-size: 14px; color: var(--suave); margin-top: 10px; }

/* Tablas: los exámenes y las tablas de un artículo */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; background: #fff; border: 1px solid var(--linea-tarjeta); border-radius: 18px; overflow: hidden; }
.tabla th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); background: var(--gris-claro); padding: 14px 18px; }
.tabla td { padding: 14px 18px; border-top: 1px solid var(--linea); vertical-align: top; }

@media (max-width: 880px) {
  .cabecera-pagina { padding: 36px 0 56px; }
  .cabecera-pagina > .contenedor { grid-template-columns: 1fr; gap: 32px; }
  .cabecera-foto { aspect-ratio: 16 / 10; }
  .migas { margin-bottom: 22px; }
  .bloque { padding: 88px 0; }
  .bloque-cab { margin-bottom: 36px; }
}
@media (max-width: 560px) {
  .cabecera-pagina h1 { font-size: 38px; }
  .cabecera-pagina .bajada { font-size: 16px; }
  .cabecera-pagina .botones { flex-direction: column; align-items: stretch; }
  .cabecera-pagina .botones .btn { justify-content: space-between; }
  .cabecera-foto .sello { width: 60px; height: 60px; left: 14px; bottom: 14px; }
  .prosa { font-size: 16px; }
  .prosa h2 { font-size: 25px; }
  .tabla { font-size: 14px; }
  .tabla th, .tabla td { padding: 12px 14px; }
}

/* El enlace al formulario, debajo de los datos de contacto del inicio */
.datos > .enlace-flecha { justify-self: start; margin: 8px 0 0 6px; }