/* ============================================================
   TERRET · Worth Agency layout language · paleta "La Terreta"
   Galería editorial: campos de color plano, un acento (terracota),
   tipografía a escala de exhibición, enlaces subrayados, sin sombras.
   Colores adaptados a la identidad alicantina de TERRET.
   ============================================================ */

:root{
  /* ---- Paleta "La Terreta" (mapeada al sistema Worth) ---- */
  --azul-bahia:#1A5E82;      /* inmersión / campo de color (rol del blush) */
  --azul-hover:#134965;
  --mar-somero:#3E92B8;      /* apoyo frío */
  --terracota:#C8622D;       /* ACENTO ÚNICO (rol del vermilion) */
  --terracota-d:#A94E20;
  --ocre:#E0A24A;            /* segundo acento puntual */
  --blanco-cal:#F4EFE6;      /* texto sobre oscuro / superficie cálida */
  --carbon:#282828;          /* tinta */
  --pure-white:#ffffff;
  --bone:#f6f4ef;            /* hueso cálido para bloques anidados */

  /* ---- Tipografía: familias (sustitutos de las faces comisionadas) ---- */
  --font-body:'Söhne','Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:'Söhne Breit','Archivo Expanded','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-system:-apple-system,ui-sans-serif,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* ---- Escala tipográfica (Worth) ---- */
  --text-body:16px;      --leading-body:1.50;      --tracking-body:-0.096px;
  --text-subheading:22px;--leading-subheading:1.45;--tracking-subheading:-0.132px;
  --text-heading-sm:28px;--leading-heading-sm:1.29;--tracking-heading-sm:-0.168px;
  --text-heading:42px;   --leading-heading:1.28;   --tracking-heading:-0.252px;
  --text-heading-lg:52px;--leading-heading-lg:1.27;--tracking-heading-lg:-0.312px;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  --page-max-width:1200px;
  --col-width:680px;

  --radius-tags:12px;
  --radius-cards:16px;
  --radius-pill:26px;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  letter-spacing:var(--tracking-body);
  color:var(--carbon);
  background:var(--pure-white);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"dlig" 0,"hlig" 0,"liga" 0,"rlig" 0,"smcp" 0;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
::selection{background:var(--terracota);color:var(--pure-white);}

/* ---------- layout base ---------- */
.section{width:100%;padding:clamp(72px,13vw,150px) clamp(1.2rem,5vw,2rem);}
.col{max-width:var(--col-width);margin:0 auto;text-align:center;}
.wide{max-width:var(--page-max-width);margin:0 auto;}

.bahia{background:var(--azul-bahia);color:var(--blanco-cal);}
.white{background:var(--pure-white);}
.bone{background:var(--bone);}
.ink{background:var(--carbon);color:var(--blanco-cal);}

/* ---------- helpers tipográficos ---------- */
.eyebrow{
  font-family:var(--font-system);
  font-size:var(--text-body);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:28px;
}
.bahia .eyebrow,.ink .eyebrow{color:var(--ocre);}
.h-lg{font-size:var(--text-heading-lg);line-height:var(--leading-heading-lg);letter-spacing:var(--tracking-heading-lg);font-weight:var(--fw-regular);}
.h{font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);font-weight:var(--fw-regular);}
.h-sm{font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);letter-spacing:var(--tracking-heading-sm);font-weight:var(--fw-medium);}
.sub{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);font-weight:var(--fw-regular);}
.lead{font-size:var(--text-subheading);line-height:1.5;letter-spacing:var(--tracking-subheading);margin-top:24px;}
.muted{color:#6f6f6f;}
.bahia .muted,.ink .muted{color:#c7dae4;}
.mt-l{margin-top:40px;}

/* ---------- enlace subrayado (sustituye a todos los botones) ---------- */
.ul-link{
  display:inline-block;
  font-family:var(--font-body);
  font-size:var(--text-subheading);
  letter-spacing:var(--tracking-subheading);
  color:var(--terracota);
  background:none;border:none;
  border-bottom:1px solid var(--terracota);
  padding-bottom:1px;cursor:pointer;
  transition:color .18s ease,border-color .18s ease,border-width .18s ease;
}
.ul-link:hover{color:var(--carbon);border-color:var(--carbon);border-bottom-width:2px;}
.bahia .ul-link:hover,.ink .ul-link:hover{color:var(--blanco-cal);border-color:var(--blanco-cal);}
.ul-link.small{font-size:var(--text-body);letter-spacing:var(--tracking-body);}
.ul-link .arr{display:inline-block;margin-left:8px;transition:transform .18s ease;}
.ul-link:hover .arr{transform:translateX(4px);}

/* ---------- píldora flotante (toda la navegación) ---------- */
.pill-nav{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:14px;
  background:var(--pure-white);
  border-radius:var(--radius-pill);
  padding:11px 12px 11px 22px;
  border:1px solid #e7e2d8;
}
.pill-nav .brand{font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--fw-semibold);color:var(--carbon);letter-spacing:-.01em;}
.pill-nav .brand b{color:var(--terracota);}
.pill-nav .label{font-family:var(--font-system);font-size:var(--text-body);color:#6f6f6f;padding-left:14px;border-left:1px solid #ebe6dc;}
.pill-toggle{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  border:1px solid var(--carbon);background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,transform .25s ease;
}
.pill-toggle svg{width:15px;height:15px;stroke:var(--carbon);stroke-width:1.5;transition:stroke .18s ease;}
.pill-toggle:hover{background:var(--terracota);border-color:var(--terracota);}
.pill-toggle:hover svg{stroke:var(--pure-white);}
.pill-toggle.open{transform:rotate(135deg);}

/* ---------- overlay de menú ---------- */
.menu-overlay{
  position:fixed;inset:0;z-index:95;
  background:var(--azul-bahia);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.menu-overlay.open{opacity:1;pointer-events:auto;}
.menu-overlay a{
  font-family:var(--font-body);
  font-size:clamp(30px,7vw,var(--text-heading));
  color:var(--blanco-cal);
  letter-spacing:var(--tracking-heading);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.menu-overlay a:hover{color:var(--ocre);border-color:var(--ocre);}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;background:var(--azul-bahia);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 1rem 60px;position:relative;
}
.hero .kicker{
  font-family:var(--font-system);font-size:var(--text-body);
  letter-spacing:.14em;text-transform:uppercase;color:var(--blanco-cal);
  margin-bottom:6vh;opacity:.9;
}
.wordmark{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(84px,26vw,400px);line-height:.75;letter-spacing:-.011em;
  text-transform:uppercase;width:100%;
  display:flex;justify-content:center;align-items:baseline;flex-wrap:nowrap;
}
/* Cada letra: entra desde abajo (una a una) y luego cicla el color de marca */
.wm-letter{
  display:inline-block;
  color:var(--terracota);
  opacity:0;
  transform:translateY(0.14em);
  animation:
    wm-in .7s cubic-bezier(.22,.9,.3,1) forwards,
    wm-color 6s ease-in-out infinite 1s;
}
/* Entrada escalonada (el delay lo pone PHP letra a letra) */
@keyframes wm-in{
  from{opacity:0;transform:translateY(0.22em) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
/* Ciclo de color entre los tonos de la marca — transición suave punto a punto */
@keyframes wm-color{
  0%   {color:var(--terracota);}
  33%  {color:var(--ocre);}
  66%  {color:var(--mar-somero);}
  100% {color:var(--terracota);}
}
.hero-tagline{
  font-family:var(--font-body);
  font-size:clamp(22px,3vw,var(--text-heading-sm));
  line-height:1.3;letter-spacing:var(--tracking-heading-sm);
  color:var(--blanco-cal);max-width:640px;margin-top:6vh;
}
.hero-tagline em{font-style:italic;color:var(--ocre);}

/* indicador de scroll */
.scroll-ind{margin-top:7vh;display:flex;flex-direction:column;align-items:center;gap:14px;}
.scroll-ind a{
  font-family:var(--font-body);font-size:var(--text-body);
  color:var(--ocre);border-bottom:1px solid var(--ocre);padding-bottom:1px;
}
.scroll-ind .down{width:18px;height:26px;stroke:var(--ocre);stroke-width:1.5;fill:none;animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* skyline decorativo del Benacantil (sutil, sin romper el plano) */
.hero .sky{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:.10;pointer-events:none;}
.hero .sky path{
  fill:none;
  stroke:var(--blanco-cal);
  stroke-width:2.5;
  stroke-dasharray:6000;
  stroke-dashoffset:6000;
  animation:sky-draw 3.2s ease-out forwards 0.5s;
}
/* El trazo se "dibuja" y al final se rellena suavemente */
@keyframes sky-draw{
  0%   {stroke-dashoffset:6000;fill:rgba(244,239,230,0);}
  70%  {stroke-dashoffset:0;fill:rgba(244,239,230,0);}
  100% {stroke-dashoffset:0;fill:rgba(244,239,230,1);stroke-width:0;}
}

/* ---------- Accesibilidad: menos movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce){
  .wm-letter{
    animation:none;
    opacity:1;
    transform:none;
    color:var(--terracota);
  }
  .hero .sky path{
    animation:none;
    fill:var(--blanco-cal);
    stroke-width:0;
    stroke-dashoffset:0;
  }
  .scroll-ind .down{animation:none;}
}

/* ---------- dolor (sección carbón) ---------- */
.pain-list{max-width:760px;margin:56px auto 0;display:flex;flex-direction:column;}
.pain-row{padding:26px 0;border-top:1px solid rgba(244,239,230,.18);display:flex;gap:22px;align-items:baseline;text-align:left;}
.pain-row:last-child{border-bottom:1px solid rgba(244,239,230,.18);}
.pain-row .idx{font-family:var(--font-body);font-size:var(--text-body);color:var(--ocre);min-width:34px;}
.pain-row .body h4{font-size:var(--text-heading-sm);line-height:1.2;letter-spacing:var(--tracking-heading-sm);font-weight:var(--fw-medium);margin-bottom:6px;}
.pain-row .body p{font-size:var(--text-body);line-height:1.5;color:#c7dae4;}

/* ---------- servicios (lista editorial numerada) ---------- */
.serv-list{max-width:900px;margin:56px auto 0;}
.serv-item{
  display:grid;grid-template-columns:70px 1fr auto;gap:24px;align-items:center;
  padding:30px 8px;border-top:1px solid rgba(40,40,40,.14);text-align:left;
  transition:padding-left .25s ease,background .25s ease;cursor:default;
}
.serv-item:last-child{border-bottom:1px solid rgba(40,40,40,.14);}
.serv-item:hover{padding-left:22px;background:var(--bone);}
.serv-item .n{font-family:var(--font-body);font-size:var(--text-subheading);color:var(--terracota);}
.serv-item .t h3{font-size:var(--text-heading-sm);line-height:1.15;letter-spacing:var(--tracking-heading-sm);font-weight:var(--fw-medium);}
.serv-item .t p{font-size:var(--text-body);color:#6f6f6f;margin-top:6px;max-width:520px;}
.serv-item .go{font-size:22px;color:var(--terracota);opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease;}
.serv-item:hover .go{opacity:1;transform:none;}
@media(max-width:680px){.serv-item{grid-template-columns:40px 1fr;gap:14px;}.serv-item .go{display:none;}}

/* ---------- método (4 pasos) ---------- */
.steps{max-width:var(--page-max-width);margin:64px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:44px 32px;}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}
.step{text-align:center;}
.step .sn{font-family:var(--font-display);font-size:72px;line-height:1;color:var(--terracota);margin-bottom:16px;letter-spacing:-.02em;}
.step h4{font-size:var(--text-subheading);font-weight:var(--fw-medium);letter-spacing:var(--tracking-subheading);margin-bottom:8px;}
.step p{font-size:var(--text-body);color:#6f6f6f;line-height:1.5;}
.bahia .step p{color:#c7dae4;}
.bahia .step h4{color:var(--blanco-cal);}

/* ---------- precios (tres planes, plano, con borde) ---------- */
.plans{max-width:var(--page-max-width);margin:60px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;}
@media(max-width:860px){.plans{grid-template-columns:1fr;max-width:520px;}}
.plan{background:var(--pure-white);border:1px solid var(--carbon);border-radius:var(--radius-cards);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;}
.plan.feat{background:var(--azul-bahia);border-color:var(--azul-bahia);color:var(--blanco-cal);}
.plan .pn{font-size:var(--text-heading-sm);letter-spacing:var(--tracking-heading-sm);font-weight:var(--fw-medium);margin-bottom:6px;}
.plan .pd{font-size:var(--text-body);color:#6f6f6f;min-height:44px;margin-bottom:20px;}
.plan.feat .pd{color:#c7dae4;}
.plan .pp{font-family:var(--font-body);font-size:var(--text-heading);letter-spacing:var(--tracking-heading);line-height:1;}
.plan.feat .pp{color:var(--ocre);}
.plan .pp small{font-size:var(--text-body);color:#6f6f6f;letter-spacing:var(--tracking-body);}
.plan.feat .pp small{color:#c7dae4;}
.plan .pmeta{font-size:14px;color:#6f6f6f;margin-top:8px;margin-bottom:22px;}
.plan.feat .pmeta{color:#c7dae4;}
.plan ul{list-style:none;flex:1;margin-bottom:26px;}
.plan li{font-size:var(--text-body);line-height:1.5;padding:6px 0 6px 22px;position:relative;}
.plan li::before{content:"→";position:absolute;left:0;color:var(--terracota);}
.plan.feat li::before{color:var(--ocre);}
.price-note{text-align:center;font-size:var(--text-body);color:#6f6f6f;margin-top:28px;max-width:560px;margin-left:auto;margin-right:auto;}

/* ---------- cita ---------- */
.quote{max-width:820px;margin:0 auto;text-align:center;}
.quote p{font-family:var(--font-body);font-size:clamp(24px,4vw,var(--text-heading));line-height:1.3;letter-spacing:var(--tracking-heading);font-style:italic;color:var(--blanco-cal);}
.quote .qm{color:var(--ocre);font-style:normal;}
.quote .by{font-size:var(--text-body);color:#c7dae4;margin-top:28px;font-style:normal;}
.quote .by b{color:var(--blanco-cal);}

/* ---------- FAQ (acordeón) ---------- */
.faq-list{max-width:760px;margin:52px auto 0;text-align:left;}
.faq{border-top:1px solid rgba(40,40,40,.16);}
.faq:last-child{border-bottom:1px solid rgba(40,40,40,.16);}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px 4px;text-align:left;
  font-family:var(--font-body);font-size:var(--text-subheading);letter-spacing:var(--tracking-subheading);
  font-weight:var(--fw-medium);color:var(--carbon);transition:color .18s ease;
}
.faq-q:hover{color:var(--terracota);}
.faq-q .pm{color:var(--terracota);font-size:26px;line-height:1;transition:transform .25s ease;flex:0 0 auto;}
.faq.open .faq-q .pm{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a .inner{padding:0 4px 26px;font-size:var(--text-body);line-height:1.55;color:#6f6f6f;max-width:640px;}

/* ---------- contacto / formulario ---------- */
.form{max-width:560px;margin:52px auto 0;text-align:left;}
.field{margin-bottom:22px;}
.field label{display:block;font-family:var(--font-system);font-size:14px;letter-spacing:.02em;color:var(--blanco-cal);margin-bottom:8px;}
.field input,.field select{
  width:100%;font-family:var(--font-body);font-size:var(--text-subheading);letter-spacing:var(--tracking-subheading);
  color:var(--blanco-cal);background:none;border:none;border-bottom:1px solid rgba(244,239,230,.5);padding:10px 2px;transition:border-color .18s ease;
}
.field input::placeholder{color:rgba(244,239,230,.45);}
.field input:focus,.field select:focus{outline:none;border-color:var(--ocre);border-bottom-width:2px;}
.field select{cursor:pointer;}
.field select option{color:var(--carbon);}
.form .submit-row{margin-top:34px;text-align:center;}
.privacy-first-layer{max-width:560px;margin:24px auto 0;padding:14px 16px;border:1px solid rgba(244,239,230,.18);border-radius:10px;background:rgba(244,239,230,.04);color:#c7dae4;font-size:13px;line-height:1.55;}
.privacy-first-layer p{margin:0;}
.privacy-first-layer strong{color:var(--blanco-cal);font-weight:600;}
.privacy-first-layer a{color:var(--mar-somero);text-decoration:underline;text-underline-offset:2px;}
.privacy-first-layer a,
.privacy-first-layer a:visited{color:var(--mar-somero)!important;text-decoration:underline;text-decoration-color:var(--mar-somero);text-underline-offset:2px;}
.privacy-first-layer a:hover,
.privacy-first-layer a:focus{color:var(--mar-somero)!important;text-decoration-color:var(--mar-somero);}
.form-note{text-align:center;font-size:14px;color:#c7dae4;margin-top:16px;}
.form-ok{display:none;text-align:center;}
.form-ok.show{display:block;}
.form-ok .big{font-size:var(--text-heading);letter-spacing:var(--tracking-heading);color:var(--ocre);}
.form-ok p{font-size:var(--text-subheading);color:var(--blanco-cal);margin-top:12px;}

/* ---------- footer ---------- */
.footer{background:var(--azul-bahia);padding:clamp(56px,9vw,90px) clamp(1.2rem,5vw,2rem) 40px;}
.footer .fmark{font-family:var(--font-display);font-size:clamp(60px,16vw,200px);line-height:.8;color:var(--terracota);text-transform:uppercase;text-align:center;letter-spacing:-.02em;}
.footer .frow{max-width:var(--page-max-width);margin:44px auto 0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(244,239,230,.2);padding-top:30px;}
.footer .fcol h5{font-family:var(--font-system);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ocre);margin-bottom:14px;}
.footer .fcol a,.footer .fcol span{display:block;font-size:var(--text-body);color:var(--blanco-cal);margin-bottom:9px;}
.footer .fcol a{border-bottom:1px solid transparent;transition:border-color .18s ease;}
.footer .fcol a:hover{border-color:var(--blanco-cal);}
.footer .legal{max-width:var(--page-max-width);margin:34px auto 0;font-size:14px;color:#c7dae4;text-align:center;}

/* ---------- reveal (aparición al hacer scroll) ----------
   LÓGICA A PRUEBA DE FALLOS:
   - Por defecto el contenido SIEMPRE se ve (opacity:1).
   - Solo si el JavaScript funciona, añade la clase 'js-anim' al <body>
     y entonces las secciones empiezan ocultas y aparecen al hacer scroll.
   Así, si el JS no cargara, la web se ve igual (nunca vacía). */
.reveal{opacity:1;transform:none;}

/* Con JS activo: ocultar para animar la entrada */
.js-anim .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.js-anim .reveal.in{opacity:1;transform:none;}

/* Si el usuario pide menos movimiento, todo visible sin animación */
@media (prefers-reduced-motion: reduce){
  .js-anim .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- volver arriba ---------- */
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:80;width:46px;height:46px;border-radius:50%;
  background:var(--terracota);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;border:none;cursor:pointer;
}
.to-top.show{opacity:1;pointer-events:auto;transform:none;}
.to-top svg{width:18px;height:18px;stroke:var(--pure-white);stroke-width:1.6;fill:none;}

/* ---------- contacto directo bajo el formulario ---------- */
.direct-contact{max-width:560px;margin:26px auto 0;text-align:center;font-size:var(--text-body);color:#c7dae4;}
.direct-contact a{color:var(--ocre);border-bottom:1px solid var(--ocre);padding-bottom:1px;}
.direct-contact a:hover{color:var(--blanco-cal);border-color:var(--blanco-cal);}

/* ---------- honeypot anti-spam (oculto) ---------- */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}

/* ---------- reseñas (estilo Google) ---------- */
.reviews{
  max-width:var(--page-max-width);margin:56px auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
}
.review{
  background:rgba(244,239,230,.06);
  border:1px solid rgba(244,239,230,.14);
  border-radius:16px;
  padding:28px 26px;
  text-align:left;
}
.review .stars{font-size:20px;letter-spacing:2px;margin-bottom:14px;}
.review .star.on{color:var(--ocre);}
.review .star.off{color:rgba(244,239,230,.25);}
.review-text{
  font-family:var(--font-body);
  font-size:var(--text-body);line-height:1.6;
  color:var(--blanco-cal);margin-bottom:16px;
}
.review-author{
  font-family:var(--font-body);
  font-size:14px;font-weight:500;
  color:var(--ocre);
}
.review-author::before{content:"— ";}

/* ---------- enlaces sociales en el footer ---------- */
.social-link{display:inline-flex;align-items:center;gap:8px;}
.social-link .soc-ic{width:17px;height:17px;flex:0 0 17px;}

/* ---------- botones sociales en la sección de contacto ---------- */
.contact-social{
  max-width:560px;margin:22px auto 0;
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
.contact-social .csoc{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:var(--text-body);font-weight:500;
  padding:12px 22px;border-radius:100px;
  border:1.5px solid rgba(244,239,230,.4);
  color:var(--blanco-cal);
  transition:background .18s ease,border-color .18s ease,transform .15s ease;
}
.contact-social .csoc svg{width:20px;height:20px;flex:0 0 20px;}
.contact-social .csoc:hover{transform:translateY(-2px);}
.contact-social .csoc.wa:hover{background:#25D366;border-color:#25D366;color:#fff;}
.contact-social .csoc.ig:hover{background:var(--ocre);border-color:var(--ocre);color:var(--carbon);}

/* ============================================================
   PÁGINAS INTERIORES + PESTAÑAS LEGALES
   Mantienen la misma escala, paleta y tipografía de TERRET.
   ============================================================ */
.inner-hero{
  min-height:62vh;
  display:flex;align-items:flex-end;
  padding:150px clamp(1.2rem,5vw,2rem) 72px;
}
.inner-hero-wrap{max-width:var(--page-max-width);width:100%;margin:0 auto;}
.inner-title{
  max-width:920px;
  font-family:var(--font-display);
  font-size:clamp(54px,9vw,120px);
  line-height:.94;
  font-weight:400;
  letter-spacing:-.035em;
  color:var(--blanco-cal);
}
.inner-intro{
  max-width:680px;margin-top:28px;
  font-size:var(--text-subheading);line-height:1.45;
  color:#c7dae4;
}
.inner-content-section{padding-top:clamp(64px,9vw,110px);padding-bottom:clamp(80px,11vw,140px);}
.legal-content{max-width:760px;margin:0 auto;font-size:var(--text-body);line-height:1.65;color:#555;}
.legal-content h2{font-size:var(--text-heading-sm);line-height:1.2;font-weight:var(--fw-medium);letter-spacing:var(--tracking-heading-sm);color:var(--carbon);margin:42px 0 12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{margin:0 0 16px;}
.legal-content ul,.legal-content ol{margin:0 0 20px 22px;}
.legal-content a{color:var(--terracota);border-bottom:1px solid var(--terracota);}
.legal-block strong{color:var(--carbon);}
.inner-cta{padding-top:80px;padding-bottom:90px;}

/* Barra inferior de pestañas: reproduce la dinámica de la captura,
   pero integrada con la identidad TERRET. */
.legal-meta{max-width:var(--page-max-width);margin:34px auto 0;font-size:14px;color:#c7dae4;text-align:center;}
.legal-nav{
  width:calc(100% + clamp(2.4rem,10vw,4rem));
  margin:30px calc(clamp(1.2rem,5vw,2rem) * -1) -40px;
  padding:12px clamp(1.2rem,5vw,2rem);
  background:#17172c;
  display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;
  font-family:var(--font-system);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.01em;
}
.legal-nav a{color:#9797a1;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease;}
.legal-nav a:hover{color:#c5c5ca;border-color:#c5c5ca;}
.legal-nav span{color:#626276;}

@media(max-width:680px){
  .inner-hero{min-height:58vh;padding-top:130px;padding-bottom:54px;}
  .inner-title{font-size:clamp(48px,14vw,78px);}
  .legal-nav{gap:7px;font-size:11px;}
  .legal-nav span{display:none;}
  .legal-nav a{margin:0 4px;}
}