/* ==========================================================================
   LikeYouBe — Sistema de diseño web
   Deriva del Brand Book v1.0 (agosto 2026). Ante una duda, manda el manual.
   Bloques: 01 Reset · 02 Tokens · 03 Registros · 04 Superficies
            05 Tipografía · 06 Layout · 07 Componentes · 08 Header/Footer
   ========================================================================== */

/* 01 · Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* 02 · Tokens de marca --------------------------------------------------- */
:root{
  /* 3.1 · Colores de la casa */
  --negro:#161A16;
  --crema:#F5F0E6;
  --cobre:#B26B3F;
  /* 3.2 · La regla de los dos valores */
  --cobre-profundo:#8A4E27;   /* sobre crema · 5,78:1 */
  --cobre-claro:#E0A46B;      /* sobre negro · 8,12:1 */
  /* 3.5 · Secundario frío reservado — Conciliación de cobranzas */
  --teal:#0E4C5C;             /* sobre crema · 8,38:1 */
  --teal-claro:#5AAABD;       /* sobre negro · 6,64:1 */
  /* 3.3 · Paleta completa */
  --grafito:#3A352F;
  --piedra:#6B6355;
  --lino:#9A917F;
  --arena:#C9C0AF;
  --arena-clara:#DCD3C2;
  --crema-media:#EDE6D8;
  --crema-clara:#FBF8F2;
  /* 3.6 · Estado */
  --exito:#3F7A4A;
  --error:#B23A2B;
  --whatsapp:#25D366;
  /* Neutros derivados para superficies oscuras */
  --negro-elev:#1E221E;
  --negro-linea:#2C312C;

  /* 4.1 · Tipografía */
  --fuente:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 4.2 · Escala */
  --f-display:clamp(2rem,7.2vw,4.5rem);
  --f-h2:clamp(1.6rem,5.2vw,2.875rem);
  --f-h3:clamp(1.25rem,2vw,1.5rem);
  --f-body:clamp(1rem,.4vw + .9rem,1.0625rem);
  --f-body-sm:clamp(.9375rem,.2vw + .88rem,.9375rem);
  --f-eyebrow:clamp(.6875rem,.2vw + .65rem,.75rem);

  /* Ritmo */
  --wrap:1160px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --seccion:clamp(3rem,8vw,7.5rem);
  --radio:3px;
}

/* 03 · Registros de acento ----------------------------------------------
   La casa firma en blanco y negro. Cada producto activa su color en su
   propia página. Cobre y frío nunca conviven en la misma pieza (3.5).      */
body[data-registro="casa"]{ --ac-crema:var(--negro);          --ac-negro:var(--crema-clara); --ac-solido:var(--negro) }
body[data-registro="cobre"]{--ac-crema:var(--cobre-profundo); --ac-negro:var(--cobre-claro); --ac-solido:var(--cobre) }
body[data-registro="teal"]{ --ac-crema:var(--teal);           --ac-negro:var(--teal-claro);  --ac-solido:var(--teal) }

/* 04 · Superficies ------------------------------------------------------- */
.s-crema{
  --bg:var(--crema); --tx:var(--grafito); --tx-fuerte:var(--negro); --tx-sec:var(--piedra);
  --linea:var(--arena-clara); --linea-fuerte:var(--piedra);
  --card:var(--crema-media); --elev:var(--crema-clara);
  --acento:var(--ac-crema); --acento-tx:var(--crema-clara);
  background:var(--bg); color:var(--tx);
}
.s-negro{
  --bg:var(--negro); --tx:var(--arena); --tx-fuerte:var(--crema-clara); --tx-sec:var(--lino);
  --linea:var(--negro-linea); --linea-fuerte:var(--lino);
  --card:var(--negro-elev); --elev:var(--negro-elev);
  --acento:var(--ac-negro); --acento-tx:var(--negro);
  background:var(--bg); color:var(--tx);
}

/* 05 · Tipografía -------------------------------------------------------- */
body{
  font-family:var(--fuente);
  font-size:var(--f-body);
  font-weight:400;
  line-height:1.6;
  background:var(--crema);
  color:var(--grafito);
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}
.display{
  font-weight:900; font-size:var(--f-display);
  letter-spacing:-.035em; line-height:.95;
  color:var(--tx-fuerte); text-wrap:balance;
}
.h2{
  font-weight:900; font-size:var(--f-h2);
  letter-spacing:-.03em; line-height:1;
  color:var(--tx-fuerte); text-wrap:balance;
}
.h3{
  font-weight:700; font-size:var(--f-h3);
  letter-spacing:-.018em; line-height:1.25;
  color:var(--tx-fuerte);
}
.bajada{font-size:clamp(1.0625rem,.6vw + .95rem,1.25rem);line-height:1.5;color:var(--tx-sec);max-width:52ch}
.p-sec{font-size:var(--f-body-sm);line-height:1.55;color:var(--tx-sec)}
.prosa{max-width:64ch}
.prosa p + p{margin-top:1rem}

/* 4.3 · Etiquetas */
.eyebrow{
  font-family:var(--mono); font-weight:400; font-size:var(--f-eyebrow);
  text-transform:uppercase; letter-spacing:.16em; line-height:1.4;
  color:var(--acento); display:block; margin-bottom:1rem;
}
.eyebrow--neutro{color:var(--tx-sec)}

/* 4.4 · Números y precios */
.dato{font-family:var(--mono);font-weight:500;letter-spacing:.01em;line-height:1.3;font-variant-numeric:tabular-nums}
.destacado{color:var(--acento);font-weight:700}

/* 06 · Layout ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--angosto{max-width:var(--wrap)}
.wrap--angosto > *{max-width:820px}
section{padding-block:var(--seccion)}
.encabezado-seccion{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.encabezado-seccion .bajada{margin-top:1.25rem}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
@media (min-width:720px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:640px) and (max-width:1023px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.hr{height:1px;background:var(--linea);border:0;margin:0}

/* 07 · Componentes ------------------------------------------------------- */
:where(a,button,summary,input):focus-visible{
  outline:2px solid var(--acento); outline-offset:3px; border-radius:2px;
}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:var(--gutter);top:.75rem;z-index:100;background:var(--negro);color:var(--crema);padding:.6rem 1rem;border-radius:var(--radio)}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:1rem;letter-spacing:-.012em;line-height:1.2;
  padding:.95rem 1.6rem;border-radius:var(--radio);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primario{background:var(--acento);color:var(--acento-tx);border-color:var(--acento)}
.btn--primario:hover{background:var(--tx-fuerte);border-color:var(--tx-fuerte);color:var(--bg)}
.btn--secundario{background:transparent;color:var(--tx-fuerte);border-color:var(--linea-fuerte)}
.btn--secundario:hover{border-color:var(--acento);color:var(--acento)}
.btn--wa{background:var(--whatsapp);color:#0C1A11;border-color:var(--whatsapp)}
.btn--wa:hover{background:#1FBA59;border-color:#1FBA59;color:#0C1A11}
.btn--bloque{width:100%}
.btn .ico{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.acciones{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* Enlace con flecha */
.link-flecha{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:700;
  color:var(--acento);text-decoration:none;letter-spacing:-.012em;
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.link-flecha:hover{border-bottom-color:var(--acento)}
.link-flecha .ico{width:1em;height:1em;fill:currentColor;transition:transform .15s ease}
.link-flecha:hover .ico{transform:translateX(3px)}

/* Tarjetas */
.card{
  background:var(--card);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:.85rem;
}
.card .h3{margin-bottom:.15rem}
.card p{color:var(--tx-sec);font-size:var(--f-body-sm);line-height:1.55}
.card--producto{gap:1.1rem;justify-content:space-between}
.card--producto .card-cuerpo{display:flex;flex-direction:column;gap:.85rem}
.card__num{font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;color:var(--acento)}

/* Listas de chequeo */
.lista{display:flex;flex-direction:column;gap:.6rem}
.lista li{position:relative;padding-left:1.6rem;font-size:var(--f-body-sm);line-height:1.55;color:var(--tx)}
.lista li::before{
  content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.38rem;
  border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:rotate(-45deg);
}
.lista--guion li::before{
  content:"";top:.72em;width:.75rem;height:0;border-left:0;
  border-bottom:2px solid var(--linea-fuerte);transform:none;
}

/* Métricas */
.metricas{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.metrica__valor{font-family:var(--mono);font-weight:500;font-size:clamp(2rem,4vw,2.75rem);letter-spacing:-.01em;line-height:1.1;color:var(--acento);font-variant-numeric:tabular-nums}
.metrica__label{font-size:var(--f-body-sm);color:var(--tx-sec);margin-top:.5rem}

/* Antes / después */
.comparador{display:grid;gap:1.25rem}
@media (min-width:820px){.comparador{grid-template-columns:1fr 1fr}}
.comparador__panel{border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(1.25rem,2.5vw,1.75rem);background:var(--card)}
.comparador__tag{font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-sec);display:block;margin-bottom:1rem}
.comparador__panel--despues .comparador__tag{color:var(--acento)}
.placeholder{
  aspect-ratio:4/3;border:1px dashed var(--linea-fuerte);border-radius:var(--radio);
  display:grid;place-items:center;text-align:center;padding:1.25rem;
  font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-sec);background:var(--bg);
}

/* Planes */
.planes{display:grid;gap:1.25rem;align-items:start}
@media (min-width:900px){.planes{grid-template-columns:repeat(3,1fr)}}
.plan{
  background:var(--card);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;gap:1.25rem;position:relative;
}
.plan--destacado{border:2px solid var(--acento);background:var(--elev)}
@media (min-width:900px){.plan--destacado{transform:scale(1.03)}}
.plan__cinta{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--acento);color:var(--acento-tx);border-radius:2px;
  font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;padding:.4rem .9rem;white-space:nowrap;
}
.plan__nivel{font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-sec)}
.plan__nombre{font-weight:900;font-size:clamp(1.6rem,2.6vw,2rem);letter-spacing:-.03em;line-height:1;color:var(--tx-fuerte);margin-top:.35rem}
.plan__para{font-size:var(--f-body-sm);color:var(--tx-sec);line-height:1.55}
.plan__precio{display:flex;align-items:baseline;gap:.35rem;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--tx-fuerte)}
.plan__moneda{font-size:.62em;transform:translateY(-.55em);color:var(--tx-sec)}
.plan__cifra{font-size:clamp(2.1rem,4.4vw,2.9rem);letter-spacing:-.015em;line-height:1}
.plan__periodo{font-family:var(--fuente);font-size:var(--f-body-sm);font-weight:400;color:var(--tx-sec);letter-spacing:0}
.plan__usd{font-family:var(--mono);font-size:var(--f-body-sm);color:var(--tx-sec);font-variant-numeric:tabular-nums;margin-top:.4rem}
.plan__ahorro{font-size:var(--f-body-sm);color:var(--acento);font-weight:700;margin-top:.5rem;min-height:1.4em}
.plan__incluye{font-size:var(--f-body-sm);font-weight:700;color:var(--tx-fuerte)}

/* Toggle mensual / anual */
.toggle{
  display:inline-flex;background:var(--card);border:1px solid var(--linea);
  border-radius:var(--radio);padding:4px;gap:4px;margin-bottom:.85rem;
}
.toggle button{
  background:transparent;border:0;cursor:pointer;border-radius:2px;
  font-weight:700;font-size:var(--f-body-sm);letter-spacing:-.01em;
  padding:.6rem 1.1rem;color:var(--tx-sec);transition:background .15s ease,color .15s ease;
}
.toggle button[aria-pressed="true"]{background:var(--acento);color:var(--acento-tx)}
.nota-precio{font-size:var(--f-body-sm);color:var(--tx-sec);max-width:62ch}

/* Tabla comparativa */
.tabla-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--f-body-sm)}
caption{text-align:left;padding:1rem 1.15rem;color:var(--tx-sec);font-size:var(--f-body-sm)}
th,td{padding:.85rem 1.15rem;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
thead th{
  font-family:var(--mono);font-weight:500;font-size:var(--f-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-sec);
  background:var(--card);position:sticky;top:0;
}
tbody th{font-weight:400;color:var(--tx);width:38%}
td{text-align:center;color:var(--tx);font-variant-numeric:tabular-nums}
thead th:not(:first-child){text-align:center}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:hover th,tbody tr:hover td{background:var(--card)}
.si{color:var(--acento);font-weight:700}
.no{color:var(--tx-sec)}
.col-destacada{background:var(--card)}

/* FAQ */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-weight:700;font-size:clamp(1.0625rem,1.4vw,1.15rem);letter-spacing:-.015em;color:var(--tx-fuerte);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:.7rem;height:.7rem;
  border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .respuesta{padding:0 2.5rem 1.5rem 0;color:var(--tx-sec);max-width:70ch}

/* Cita / regla de oro */
.regla{
  border-left:3px solid var(--acento);padding:.35rem 0 .35rem 1.5rem;
  font-size:clamp(1.125rem,1.8vw,1.375rem);font-weight:700;letter-spacing:-.02em;
  line-height:1.35;color:var(--tx-fuerte);max-width:46ch;
}

/* Franja de cierre */
.cierre{text-align:left}
.cierre .display{max-width:18ch}

/* 08 · Header y footer --------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:50;background:var(--crema);
  border-bottom:1px solid var(--arena-clara);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:76px}
.header__logo{display:flex;align-items:center}
.header__logo img{width:152px;height:auto}
.nav{display:none;align-items:center;gap:1.75rem}
@media (min-width:1120px){.nav{display:flex}}
.nav a{
  text-decoration:none;font-size:var(--f-body-sm);font-weight:500;color:var(--grafito);
  letter-spacing:-.005em;padding-block:.35rem;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--negro);border-bottom-color:var(--negro)}
.header .btn{padding:.7rem 1.15rem;font-size:var(--f-body-sm)}
.nav-toggle{
  display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--arena-clara);
  border-radius:var(--radio);padding:.55rem .8rem;cursor:pointer;font-size:var(--f-body-sm);font-weight:700;color:var(--negro);
}
@media (min-width:1120px){.nav-toggle{display:none}}
.nav-movil{display:none;border-bottom:1px solid var(--arena-clara);background:var(--crema-clara)}
.nav-movil[data-abierto="true"]{display:block}
@media (min-width:1120px){.nav-movil{display:none!important}}
.nav-movil ul{display:flex;flex-direction:column;padding-block:.75rem}
.nav-movil a{display:block;padding:.85rem 0;text-decoration:none;font-weight:500;border-bottom:1px solid var(--arena-clara);color:var(--grafito)}
.nav-movil li:last-child a{border-bottom:0}

.footer{background:var(--negro);color:var(--arena);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.footer a{color:var(--arena);text-decoration:none}
.footer a:hover{color:var(--crema-clara)}
.footer__grid{display:grid;gap:2.5rem}
@media (min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer__logo img{width:170px;height:auto;margin-bottom:1.25rem}
.footer h4{font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--lino);font-weight:400;margin-bottom:1rem}
.footer ul{display:flex;flex-direction:column;gap:.7rem;font-size:var(--f-body-sm)}
.footer__legal{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--negro-linea);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-size:var(--f-body-sm);color:var(--lino);
}
.footer__legal p{max-width:64ch}

/* Utilidades */
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-0{margin-top:0}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:clamp(2rem,4vw,3rem)}

/* 09 · Añadidos de página ------------------------------------------------- */
.header__acciones{display:flex;align-items:center;gap:.6rem}
.header__acciones .btn{display:none}
@media (min-width:620px){.header__acciones .btn{display:inline-flex}}
.hero{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(4rem,9vw,7rem)}
.hero .bajada{margin-top:1.5rem;max-width:56ch}
.pilares{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pilar h3{font-weight:700;font-size:1.0625rem;letter-spacing:-.015em;color:var(--tx-fuerte);margin-bottom:.5rem}
.pilar p{font-size:var(--f-body-sm);color:var(--tx-sec);line-height:1.55}
.pilar{border-top:2px solid var(--linea);padding-top:1.25rem}
.franja-planes{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:2.5rem}
.mini-plan{border:1px solid var(--linea);border-radius:var(--radio);padding:1.5rem;background:var(--card)}
.mini-plan .plan__nombre{font-size:1.5rem}
.contacto-canales{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2.5rem}
.canal{border-top:2px solid var(--linea);padding-top:1.25rem}
.canal h3{font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-sec);font-weight:400;margin-bottom:.6rem}
.canal a{color:var(--tx-fuerte);font-weight:700;text-decoration:none;letter-spacing:-.012em;border-bottom:2px solid transparent}
.canal a:hover{border-bottom-color:var(--acento);color:var(--acento)}
.pasos{counter-reset:paso;display:grid;gap:clamp(1.5rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.paso{border-top:2px solid var(--linea);padding-top:1.25rem}
.paso::before{
  counter-increment:paso;content:"0" counter(paso);
  font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;
  color:var(--acento);display:block;margin-bottom:.75rem;
}
.paso h3{font-weight:700;font-size:1.0625rem;letter-spacing:-.015em;color:var(--tx-fuerte);margin-bottom:.5rem}
.paso p{font-size:var(--f-body-sm);color:var(--tx-sec);line-height:1.55}

/* 10 · Correcciones de verificación --------------------------------------- */
/* El header es sticky: los destinos de los links con ancla necesitan aire. */
section[id],main [id]{scroll-margin-top:96px}
/* Tarjetas de plan de igual alto, con el botón siempre al pie. */
.planes{align-items:stretch}
.plan > .btn{margin-top:auto}
/* El precio anual de Full es la cifra más larga del sitio: que no apriete. */
.plan__cifra{font-size:clamp(1.9rem,3.9vw,2.55rem)}
/* Dos superficies crema seguidas necesitan una línea que las separe. */
.s-crema + .s-crema{border-top:1px solid var(--arena-clara)}

/* 11 · Plan único de suscripción (Conciliación) ---------------------------- */
.plan-unico{max-width:640px;margin-inline:auto;gap:1.5rem}
.plan-unico .plan__nombre{font-size:clamp(1.8rem,3.2vw,2.3rem)}
.plan__sin-precio{
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding-block:1.15rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
}
.plan__sin-precio strong{
  font-family:var(--mono);font-weight:500;font-size:clamp(1.15rem,2vw,1.4rem);
  letter-spacing:-.01em;color:var(--acento);
}
.plan__sin-precio span{font-size:var(--f-body-sm);color:var(--tx-sec)}
.plan-unico .lista{gap:.7rem}
@media (min-width:620px){.plan-unico .lista{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.75rem}}
/* Un link dentro de una nota tiene que leerse como link, no como negrita. */
.nota-precio .link-flecha{border-bottom-color:currentColor}
/* Tarjeta a todo el ancho dentro de una grilla (la consultoria bajo los productos). */
.card--ancho{grid-column:1/-1}
.card--ancho .card-cuerpo{max-width:70ch}
/* Los cinco rasgos de personalidad entran en una sola fila en escritorio. */
@media (min-width:1024px){.pilares--5{grid-template-columns:repeat(5,1fr);gap:clamp(1.25rem,2vw,1.75rem)}}

/* 12 · Antes / después con material real ---------------------------------- */
.comparador{align-items:start}
/* Alto máximo de las láminas del catálogo. Tocá estos dos valores para
   agrandarlas o achicarlas en todo el sitio. */
:root{--lamina:clamp(240px,30vw,400px);--lamina-galeria:clamp(165px,19vw,260px)}
.comparador__figura{
  display:flex;justify-content:center;background:var(--bg);
  border:1px solid var(--linea);border-radius:2px;padding:clamp(.75rem,1.5vw,1.25rem);
}
.comparador__figura img{max-height:var(--lamina);width:auto;max-width:100%;height:auto;display:block}
.comparador__pie{font-size:var(--f-body-sm);line-height:1.55;color:var(--tx-sec);margin-top:1rem}
.galeria{display:flex;flex-wrap:wrap;gap:clamp(1.25rem,2.5vw,2rem);margin-top:1.25rem}
.galeria figure{margin:0}
.galeria img{height:var(--lamina-galeria);width:auto;max-width:100%;border:1px solid var(--linea);border-radius:2px;display:block}
.galeria figcaption{
  font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-sec);margin-top:.75rem;
}
/* Las tres páginas del catálogo, juntas y del mismo tamaño, frente a la planilla. */
@media (min-width:820px){.comparador--tres{grid-template-columns:minmax(0,0.95fr) minmax(0,1.6fr)}}
.laminas{display:flex;flex-wrap:wrap;gap:clamp(.75rem,1.5vw,1.25rem);justify-content:flex-start}
.laminas figure{margin:0}
.laminas img{height:var(--lamina-galeria);width:auto;max-width:100%;display:block;border:1px solid var(--linea);border-radius:2px}
.laminas figcaption{
  font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-sec);margin-top:.6rem;
}
/* Las dos tarjetas del antes/después cierran a la misma altura. */
@media (min-width:820px){
  .comparador--tres{align-items:stretch}
  .comparador--tres .comparador__panel{display:flex;flex-direction:column}
}
/* La planilla aprovecha todo el ancho de su marco. */
.comparador--tres .comparador__figura{padding:clamp(.4rem,.8vw,.6rem)}

/* 13 · Mobile ------------------------------------------------------------- */
@media (max-width:819px){
  /* Las páginas del catálogo pasan a carrusel: se ven grandes y se pasan con el dedo. */
  .laminas{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:.5rem;
  }
  .laminas figure{flex:0 0 auto;scroll-snap-align:start}
  .laminas img{height:auto;width:min(68vw,280px)}
  /* Objetivos táctiles: nada por debajo de 44 px de alto. */
  .btn,.toggle button,.nav-toggle{min-height:44px}
  .faq summary{padding-block:1.15rem}
  /* La tabla comparativa se guarda detrás de un desplegable. */
  .plegable > summary{
    cursor:pointer;list-style:none;font-weight:700;font-size:1rem;letter-spacing:-.015em;
    color:var(--tx-fuerte);padding:1rem 0;border-top:1px solid var(--linea);
    border-bottom:1px solid var(--linea);position:relative;padding-right:2rem;
  }
  .plegable > summary::-webkit-details-marker{display:none}
  .plegable > summary::after{
    content:"";position:absolute;right:.4rem;top:50%;width:.6rem;height:.6rem;
    border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
  }
  .plegable[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
  .plegable > .tabla-scroll{margin-top:1.25rem}
}
@media (min-width:820px){
  .plegable > summary{display:none}
}

/* 14 · Chapa de partner --------------------------------------------------- */
.partner{
  display:inline-flex;align-items:center;gap:1rem;
  padding:.8rem 1.2rem;border:1px solid var(--linea-fuerte);border-radius:3px;
  background:var(--card);margin-bottom:1.75rem;max-width:100%;flex-wrap:wrap;
}
/* El logo de Odoo va sobre su propio fondo claro: no se recolorea una marca
   ajena, y sobre el negro el violeta oficial perdería contraste. */
.partner__logo{display:grid;place-items:center;flex:none}
.partner__logo img{height:28px;width:auto;display:block}
/* Hoy las dos chapas van sobre crema y usan odoo-logo.png, la versión a color.
   Si alguna chapa vuelve a fondo negro hay que cambiar el archivo por
   odoo-logo-blanco.png. Nunca se recolorean los colores de Odoo. */
.partner__sello{
  font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-fuerte);line-height:1.4;
}
.partner__sello strong{font-family:var(--fuente);font-weight:700;letter-spacing:-.01em;
  text-transform:none;font-size:1.0625rem;display:block;margin-top:.2rem}
/* Hueco provisorio hasta que entre el archivo oficial del logo. */
.partner__hueco{
  height:30px;min-width:96px;border:1px dashed var(--linea-fuerte);border-radius:2px;
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;color:var(--tx-sec);padding-inline:.6rem;flex:none;
}
.dato--suelto{font-family:var(--mono);font-size:var(--f-body-sm);color:var(--tx-sec);margin-top:1.5rem}
@media (min-width:900px){.pilares--4{grid-template-columns:repeat(4,1fr)}}

/* 15 · Contrafrentes: el problema y la respuesta, enfrentados --------------- */
@media (min-width:820px){
  .contrafrentes{gap:clamp(2.5rem,5vw,4.5rem)}
  .contrafrentes > div + div{
    border-left:1px solid var(--linea);
    padding-left:clamp(2.5rem,5vw,4.5rem);
  }
}
.contrafrentes .acciones{margin-top:1.75rem}
/* Dos superficies negras seguidas también necesitan una línea que las separe. */
.s-negro + .s-negro{border-top:1px solid var(--negro-linea)}

/* 16 · Áreas que integra Odoo ---------------------------------------------
   Grilla pareja, sin caja ni borde: no son botones y no tienen que parecerlo. */
.areas{display:grid;gap:clamp(1.1rem,2vw,1.6rem) clamp(1.1rem,2.2vw,2rem);
  grid-template-columns:repeat(2,1fr);margin-top:.5rem}
@media (min-width:640px){.areas{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.areas{grid-template-columns:repeat(5,1fr)}}
.areas li{border-top:1px solid var(--linea);padding-top:.85rem}
.areas b{
  display:block;font-weight:700;font-size:1rem;line-height:1.25;
  letter-spacing:-.015em;color:var(--tx-fuerte);
}
.areas span{
  display:block;margin-top:.35rem;font-size:var(--f-body-sm);
  line-height:1.45;color:var(--tx-sec);
}

/* 17 · Comodidad de lectura en el teléfono -------------------------------- */
@media (max-width:640px){
  /* Más aire entre renglones: en pantalla chica el ojo pierde la línea. */
  .lista li,.card p,.p-sec,.nota-precio,.pilar p,.paso p,.comparador__pie,.plan__para{line-height:1.65}
  .prosa p{line-height:1.65}
  .faq .respuesta p{line-height:1.65}
  /* Las áreas de Odoo pasan a una columna: en dos quedaban 24 caracteres por
     línea y el descriptor se partía en tres renglones. */
  .areas{grid-template-columns:1fr;gap:.9rem}
  .areas li{padding-top:.7rem}
  .areas b{display:inline}
  .areas b::after{content:"\00a0\00b7\00a0";color:var(--tx-sec);font-weight:400}
  .areas span{display:inline;margin-top:0}
}

/* 18 · Mobile-first: objetivos táctiles, etiquetas y densidad --------------
   Auditado a 375 y 390 px sobre las cinco páginas.                          */
@media (max-width:819px){

  /* El encabezado ocupaba 77 px, el 9% de la pantalla. */
  .header__inner{height:60px}
  .header__logo img{width:132px}

  /* Nada por debajo de 44 px de alto: el dedo no tiene puntero.
     Los links del pie medían 17 px y los canales de contacto, 19. */
  .footer ul{gap:0}
  .footer ul a{display:flex;align-items:center;min-height:44px;padding-block:.5rem}
  .canal a{display:flex;align-items:center;min-height:44px}
  .link-flecha{min-height:44px;align-items:center}
  .nav-movil a{display:flex;align-items:center;min-height:48px;padding-block:.6rem}

  /* 11 px es legible impreso, no en un teléfono a un brazo de distancia.
     El manual admite 11–12 px para etiquetas: usamos el techo. */
  .eyebrow,.plan__nivel,.comparador__tag,.plan__cinta,.laminas figcaption,
  .galeria figcaption,thead th,.footer h4,.canal h3{font-size:.75rem}

  /* El pulgar acierta mejor un botón de borde a borde. */
  .acciones{flex-direction:column;align-items:stretch}
  .acciones .btn{width:100%}

  /* Direcciones y correos largos no empujan el ancho de la página. */
  .canal a,.footer a,.prosa a{overflow-wrap:anywhere}
}

.pista-scroll{display:none}
@media (max-width:819px){
  .pista-scroll{
    display:block;margin:1rem 0 0;font-family:var(--mono);font-size:.75rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--tx-sec);
  }
}
@media (max-width:819px){
  /* El logo también es un link al inicio: tiene que poder tocarse. */
  .header__logo{min-height:44px;align-items:center}
  /* El símbolo de peso se mide contra su párrafo, no contra la cifra. */
  .plan__moneda{font-size:.78em}
}

/* 19 · Carrusel de entrada -------------------------------------------------
   Cuatro diapositivas: la casa, Odoo, Gestión de Cobranzas y Folder Digital.
   Se desliza con el dedo (scroll-snap nativo), con flechas y con el teclado.
   Todas las diapositivas comparten el registro de la casa: el cobre y el frío
   no conviven en una misma pieza, así que la diferencia la hace el contenido.
-------------------------------------------------------------------------- */
.carrusel-seccion{padding-block:0}
.carrusel{position:relative}

.carrusel__pista{
  display:flex;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista:focus-visible{outline:2px solid var(--acento);outline-offset:-4px}

.diapo{flex:0 0 100%;min-width:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex}
.diapo__caja{
  /* El contenido arranca arriba y no centrado: todas las diapositivas miden lo
     que la mas alta, y con el centrado las cortas quedaban flotando lejos de la
     cabecera. Asi la chapa siempre cae a la misma altura y el sobrante va abajo,
     donde no molesta. El relleno de arriba se mide contra el ancho, por eso en
     una pantalla ancha de Windows llegaba al maximo: se baja de 88 a 52 px. */
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;
  min-height:clamp(24rem,52vh,31rem);
  padding-block:clamp(2rem,3.5vw,3.25rem) clamp(1.25rem,2vw,1.75rem);
}
/* En el escritorio el titular usa un cuerpo mas contenido y una medida mas
   ancha que el resto del sitio: asi la diapositiva mas alta entra completa en
   pantalla, con las flechas y la raya adentro. En el telefono no cambia nada
   (el minimo del clamp es el mismo de antes). */
.diapo .display{font-size:clamp(1.9rem,4.8vw,2.9rem);max-width:22ch}
.diapo .bajada{margin-top:1.25rem;max-width:54ch}
.diapo .partner{align-self:flex-start;margin-bottom:1.5rem}
.diapo .eyebrow{display:block;margin-bottom:1.25rem}
.diapo .acciones{margin-top:1.75rem}

/* Barra de control: flechas a los costados, puntos al medio. */
/* Las flechas, las rayas y el contador van juntos y alineados con el texto.
   Antes las flechas estaban en los extremos, a mas de mil pixeles una de otra,
   y se leian como adorno de la pagina y no como el control de un carrusel. */
.carrusel__barra{
  display:flex;align-items:center;gap:.4rem;
  padding-bottom:clamp(1.5rem,2.5vw,2rem);
}
.carrusel__cuenta{
  margin:0 0 0 .6rem;font-family:var(--mono);font-size:var(--f-body-sm);
  color:var(--tx-sec);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.carrusel__flecha{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--linea-fuerte);border-radius:999px;background:transparent;
  color:var(--tx-fuerte);cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}
.carrusel__flecha svg{width:20px;height:20px;fill:currentColor}
.carrusel__flecha:hover{border-color:var(--acento);background:var(--card)}
.carrusel__flecha:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

.puntos{
  display:flex;align-items:center;gap:.15rem;
  list-style:none;margin:0 .35rem;padding:0;
}
.puntos li{display:flex}

/* Rayas: la activa es tres veces mas larga y mas gruesa que las dormidas.
   La diferencia de tamaño es la que hace que se lea como "estoy aca" y no
   como un renglon para completar. El nombre de cada diapositiva viaja en la
   etiqueta accesible, aunque no se vea. */
.punto{
  display:grid;place-items:center;height:44px;min-width:30px;padding:0 5px;
  border:0;background:transparent;cursor:pointer;
}
.punto__texto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.punto__marca{
  display:block;width:18px;height:3px;border-radius:2px;
  background:var(--linea-fuerte);
  transition:width .25s ease,height .25s ease,background-color .2s ease;
}
.punto:hover .punto__marca{background:var(--tx-sec)}
.punto[aria-current="true"] .punto__marca{
  width:54px;height:4px;background:var(--acento);
}
.punto:focus-visible{outline:2px solid var(--acento);outline-offset:-6px;border-radius:4px}


/* Pantalla ancha pero baja: el limite ya no es el ancho sino el alto, asi que
   el titular del carrusel se mide en vh. Es el caso del portatil con la barra
   de favoritos abierta, donde antes las flechas quedaban abajo del pliegue. */
@media (min-width:820px) and (max-height:780px){
  .diapo .display{font-size:clamp(1.75rem,4.4vh,3.25rem)}
  .diapo__caja{padding-block:clamp(1.5rem,2.5vw,2.25rem) 1rem;min-height:auto}
  .carrusel__barra{padding-bottom:1.25rem}
}

/* Sin JavaScript el carrusel sigue siendo legible: se desliza a mano. */
.carrusel:not([data-listo]) .carrusel__barra{visibility:hidden}

@media (max-width:640px){
  .diapo__caja{min-height:auto;padding-block:clamp(2.5rem,9vw,3.5rem) 1.5rem}
  .diapo .display{max-width:none}
  .carrusel__barra{padding-bottom:1.75rem}
}
@media (prefers-reduced-motion:reduce){
  .carrusel__pista{scroll-behavior:auto}
  .punto__marca,.carrusel__flecha{transition:none}
}

/* 20 · Identidad por diapositiva -------------------------------------------
   El carrusel va sobre crema, así que cada producto puede usar su acento
   pleno (el cobre profundo y el teal), que sobre negro habría que reemplazar
   por las versiones claras y ahí el producto se apaga. Los dos acentos no se
   ven nunca juntos: cada diapositiva ocupa el ancho completo de la pantalla.
   Si alguna vez el carrusel vuelve a negro, hay que cambiar estos valores por
   --cobre-claro y --teal-claro, con --acento-tx en var(--negro).
-------------------------------------------------------------------------- */
.diapo[data-registro="cobre"]{--acento:var(--cobre-profundo);--acento-tx:var(--crema-clara)}
.diapo[data-registro="teal"] {--acento:var(--teal);          --acento-tx:var(--crema-clara)}

/* Chapa de producto: el mismo gesto que la chapa de partner de Odoo, para que
   las cuatro diapositivas tengan el mismo arranque. */
.partner--producto,
.partner--servicio{
  border-left:4px solid var(--acento);padding-left:1.1rem;
  align-self:flex-start;margin:0 0 1.5rem;
}
.partner--producto .partner__sello,
.partner--servicio .partner__sello{color:var(--tx-sec)}
.partner--producto .partner__sello strong,
.partner--servicio .partner__sello strong{
  color:var(--acento);font-size:clamp(1.25rem,2.2vw,1.5rem);
  letter-spacing:-.025em;margin-top:.3rem;
}

/* 21 · Lo que va aparte de la suscripción ----------------------------------
   Mismo ancho que el plan único, para que se lean como una sola columna.
-------------------------------------------------------------------------- */
.aparte{max-width:640px;margin:1.25rem auto 0}
.aparte .h3{margin-bottom:.9rem}
.aparte .lista li{padding-left:1.45rem}
.aparte .lista li strong{color:var(--tx-fuerte);font-weight:700}

/* 22 · Planes deslizables en pantallas angostas ----------------------------
   Apilados, los tres planes son 2.700 px de scroll: nadie llega al tercero.
   Deslizándose de costado la sección mide lo que mide el plan más alto, y el
   recorte del plan vecino avisa que hay más sin tener que explicarlo.
-------------------------------------------------------------------------- */
@media (max-width:899px){
  .planes{
    display:flex;align-items:stretch;gap:1rem;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    /* sangría negativa: las tarjetas llegan al borde de la pantalla.
       El padding de arriba deja lugar a la cinta del plan destacado, que
       asoma por encima del borde y el overflow recortaría. */
    margin-inline:calc(var(--gutter) * -1);
    padding:1rem var(--gutter) .5rem;
  }
  .planes::-webkit-scrollbar{display:none}
  .plan{flex:0 0 86%;scroll-snap-align:center;scroll-snap-stop:always}
  .plan-unico{flex:1 1 auto}          /* el plan único de Cobranzas no se desliza */
}
.pista-planes{display:none}
@media (max-width:899px){
  .pista-planes{
    display:block;margin:.85rem 0 0;font-family:var(--mono);font-size:.75rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--tx-sec);
  }
}

/* 23 · Densidad en el teléfono ---------------------------------------------
   Aire de sobra en el escritorio, aire justo en la mano.
-------------------------------------------------------------------------- */
@media (max-width:819px){
  :root{--seccion:2.5rem;--lamina:210px}
  .encabezado-seccion{margin-bottom:2rem}
  .card{padding:1.25rem}
  .grid{gap:1rem}
  .comparador__panel{padding:1.15rem}
}

/* 24 · Objetivos táctiles hasta que se va el menú de mano ------------------
   El menú hamburguesa vive hasta 1120 px, así que entre 820 y 1119 —tablets
   en vertical, teléfonos acostados, ventanas angostas— seguía habiendo dedos
   y objetivos de 17 px. Estas reglas acompañan al menú, no al teléfono.
-------------------------------------------------------------------------- */
@media (max-width:1119px){
  .btn,.toggle button,.nav-toggle{min-height:44px}
  .nav-movil a{display:flex;align-items:center;min-height:48px;padding-block:.6rem}
  .header__logo{min-height:44px;align-items:center}
  .footer ul{gap:0}
  .footer ul a{display:flex;align-items:center;min-height:44px;padding-block:.5rem}
  .canal a{display:flex;align-items:center;min-height:44px}
  .link-flecha{min-height:44px;align-items:center}
  /* El signo de peso se mide contra su párrafo, no contra la cifra. */
  .plan__moneda{font-size:.78em}
}
/* La chapa se había quedado afuera del piso de 12 px de las etiquetas. */
@media (max-width:819px){
  .partner__sello{font-size:.75rem}
}

/* 25 · Puntos desplegables (ojo: .punto son los puntitos del carrusel) -----
   En el escritorio se ven exactamente igual que antes: el JavaScript los abre
   y el summary deja de responder al mouse. En el teléfono se pliegan y cada
   bloque pasa de una pila de tarjetas a una lista de renglones.
   Nacen abiertos en el HTML: si el script no corre, no se esconde nada.
-------------------------------------------------------------------------- */
.acordeon > details > summary{list-style:none;display:block}
.acordeon > details > summary::-webkit-details-marker{display:none}
.acordeon > details .h3{display:block}
.acordeon > details > p{color:var(--tx-sec);font-size:var(--f-body-sm);line-height:1.55}

/* Variante tarjeta */
.acordeon > details{
  background:var(--card);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(1.25rem,3vw,2.25rem);
}
.acordeon > details .h3{margin-bottom:.15rem}
.acordeon > details > p{margin-top:.85rem}

/* Variante fila: pilares y pasos, con su regla arriba */
.acordeon--filas > details{
  background:transparent;border:0;border-top:2px solid var(--linea);
  border-radius:0;padding:1.25rem 0 0;
}
.acordeon--filas > details .h3{
  font-weight:700;font-size:1.0625rem;letter-spacing:-.015em;
  color:var(--tx-fuerte);margin-bottom:.5rem;
}
.acordeon--filas > details > p{margin-top:0}

/* Los pasos siguen numerados: el contador vive en .pasos */
.acordeon--pasos > details > summary::before{
  counter-increment:paso;content:"0" counter(paso);
  font-family:var(--mono);font-size:var(--f-eyebrow);letter-spacing:.16em;
  color:var(--acento);display:block;margin-bottom:.75rem;
}

@media (min-width:820px){
  .acordeon > details > summary{cursor:default;pointer-events:none}
}

@media (max-width:819px){
  .acordeon{display:block;gap:0}
  /* El borde va en cada renglón y no en el contenedor: así una tarjeta ancha
     puede convivir con los renglones sin que quede una raya suelta. */
  .acordeon > details{
    background:transparent;border:0;border-top:1px solid var(--linea);
    border-radius:0;padding:0;
  }
  .acordeon > details:last-of-type{border-bottom:1px solid var(--linea)}
  .acordeon > details > summary{
    cursor:pointer;position:relative;padding:1.05rem 2.25rem 1.05rem 0;min-height:44px;
  }
  .acordeon > details .h3{font-size:1.0625rem;margin-bottom:0;display:inline}
  .acordeon > details > summary::after{
    content:"";position:absolute;right:.4rem;top:50%;width:.6rem;height:.6rem;
    border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
  }
  .acordeon > details[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
  .acordeon > details > p{margin-top:0;padding-bottom:1.05rem;line-height:1.65}
  .acordeon--pasos > details > summary::before{display:inline;margin:0 .55rem 0 0}
  .acordeon > .card{margin-block:1rem}
  .acordeon > .card:first-child{margin-top:0}
  /* El plegable de "ver más" dentro de un plan no lleva el borde de arriba:
     ya lo trae la lista que tiene encima. */
  .plan .plegable > summary{border-top:0;margin-top:.25rem}
  .plan .plegable > .lista{margin-top:1rem}
}
@media (min-width:820px){
  .plan .plegable > .lista{margin-top:.7rem}
}

/* 26 · Pie más corto -------------------------------------------------------- */
.footer{padding-block:clamp(2.25rem,4.5vw,3.25rem) 1.5rem}
.footer__grid{gap:2rem}
.footer__logo img{width:150px;margin-bottom:.9rem}
.footer__legal{margin-top:clamp(1.75rem,3.5vw,2.5rem);padding-top:1.1rem}
@media (min-width:760px){.footer__grid{gap:2.5rem}}

/* Las listas del pie no llevan clase, así que se les escapaban los bullets
   del navegador: es el único lugar del sitio con viñetas de fábrica. */
.footer ul{list-style:none;padding:0;margin:0}
/* En el teléfono las dos columnas de links van una al lado de la otra:
   son etiquetas cortas y ahorran media pantalla de pie. */
@media (max-width:759px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem}
  .footer__grid > div:first-child{grid-column:1 / -1}
  .footer ul a{overflow-wrap:anywhere}
}

/* Un link dentro de un desplegable (el de Odoo en Consultoría). */
.acordeon > details > .link-flecha{margin-top:.85rem}
.acordeon > details > summary .eyebrow{margin-bottom:.5rem}
@media (max-width:819px){
  .acordeon > details > p:has(+ .link-flecha){padding-bottom:.35rem}
  .acordeon > details > .link-flecha{margin-top:0;margin-bottom:1.05rem}
  .acordeon > details > summary .eyebrow{display:block;margin-bottom:.3rem}
}

/* 27 · Resalte cálido para la casa -----------------------------------------
   OJO: el cobre es el acento de Folder Digital y el manual lo reserva. La
   consultoría no tiene color propio, así que este resalte lo toma prestado.
   Si alguna vez se define un tercer acento para la casa, se cambia acá y en
   ningún otro lado del CSS.
-------------------------------------------------------------------------- */
.s-crema .resalte,
.s-crema .h3.resalte{color:var(--cobre-profundo)}
.s-negro .resalte,
.s-negro .h3.resalte{color:var(--cobre-claro)}