/* ==========================================================================
   Escuela Regiomontana de Coaching - hoja de estilos unica
   Escrita desde cero. Sin frameworks ni dependencias externas.
   ========================================================================== */

/* --- 1. Variables de marca ------------------------------------------------ */
:root{
  /* Colores medidos del sitio original y del logo:
     #c08f5d es el cobre de las franjas, #d88f71 el de los botones,
     #dfc7ae la arena clara, #c07848 el dominante del logo. */
  --cobre:        #c08f5d;
  --cobre-logo:   #a86237;   /* el cafe del logo, ajustado para que el blanco se lea */
  --cobre-oscuro: #a3744a;
  --salmon:       #d88f71;   /* botones, como en el original */
  --salmon-oscuro:#c2765a;
  --arena:        #dfc7ae;
  --crema:        #fdf8f2;
  --cafe:         #4a3425;   /* titulos: cafe oscuro, nunca negro ni azul */
  --cafe-suave:   #6f5c4d;   /* texto de parrafo */
  --blanco:       #ffffff;
  --linea:        #ecdfd0;

  --fuente-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fuente-texto:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --ancho: 1180px;
  --radio: 14px;
  --sombra: 0 18px 45px -22px rgba(74,52,37,.35);
  --transicion: .28s cubic-bezier(.4,0,.2,1);
  --diagonal: clamp(38px, 4.5vw, 78px);   /* altura del corte inclinado */
}

/* --- 2. Reinicio ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--fuente-texto);
  font-size:1rem;
  line-height:1.75;
  color:var(--cafe-suave);
  background:var(--blanco);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--cobre-oscuro); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--fuente-titulo);
  color:var(--cafe);
  line-height:1.16;
  letter-spacing:-.012em;   /* la Playfair respira mejor un poco mas junta */
  margin:0 0 .6em;
  font-weight:600;
}
h1{ font-size:clamp(2.1rem,5.2vw,3.5rem); }
h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); }
h3{ font-size:clamp(1.2rem,2.1vw,1.5rem); }
p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }

:focus-visible{ outline:3px solid var(--cobre); outline-offset:3px; border-radius:4px; }
::selection{ background:rgba(168,98,55,.22); color:var(--cafe); }

/* --- 3. Utilidades -------------------------------------------------------- */
.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.seccion{ padding:clamp(4rem,9vw,7.5rem) 0; }
.seccion--crema{ background:var(--crema); }
.seccion--arena{ background:linear-gradient(95deg,var(--cobre) 0%,#cfa47c 38%,#e8d3bc 72%,var(--blanco) 100%); }
.centrado{ text-align:center; }
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--cafe); color:#fff; padding:.8rem 1.4rem; border-radius:0 0 8px 0;
}
.saltar:focus{ left:0; }

.antetitulo{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--fuente-texto);
  font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cobre-logo); margin-bottom:.9rem;
}
/* Guion corto de cobre antes del antetitulo: gesto editorial discreto */
.antetitulo::before{
  content:""; width:30px; height:2px; flex:none; border-radius:2px;
  background:currentColor; opacity:.8;
}
.encabezado-seccion .antetitulo,
.centrado .antetitulo,
.llamada .antetitulo{ justify-content:center; }

.encabezado-seccion{ max-width:720px; margin:0 auto clamp(2.2rem,5vw,3.5rem); text-align:center; }
.encabezado-seccion p{ font-size:1.05rem; }

.filigrana{
  width:86px; height:2px; border-radius:2px; margin:1.4rem auto 0;
  background:linear-gradient(90deg,var(--cobre-logo),var(--cobre),transparent);
}
.filigrana--izq{ margin-inline:0; }

/* --- 4. Botones ----------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--fuente-texto); font-size:.82rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 2.1rem; border:2px solid transparent; border-radius:50px;
  cursor:pointer; transition:var(--transicion); text-decoration:none;
}
.boton:hover{ text-decoration:none; transform:translateY(-2px); }
.boton--primario{ background:var(--salmon); color:#fff; box-shadow:0 14px 30px -16px rgba(194,118,90,.95); }
.boton--primario:hover{ background:var(--salmon-oscuro); color:#fff; }
.boton--contorno{ border-color:var(--salmon); color:var(--cobre-oscuro); background:transparent; }
.boton--contorno:hover{ background:var(--salmon); color:#fff; }
.boton--claro{ background:#fff; color:var(--cobre-oscuro); box-shadow:0 14px 34px -18px rgba(74,52,37,.6); }
.boton--claro:hover{ background:var(--cafe); color:#fff; }
.boton svg{ width:17px; height:17px; flex:none; }

/* --- 5. Encabezado y navegacion ------------------------------------------ */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(216,143,113,.45);
  transition:box-shadow var(--transicion);
}
.cabecera.fijada{ box-shadow:0 10px 30px -22px rgba(59,42,32,.55); }
.cabecera__fila{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; }
.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.marca img{ width:58px; height:58px; object-fit:contain; }
.marca span{
  font-family:var(--fuente-titulo); color:var(--cafe);
  font-size:1rem; line-height:1.15; font-weight:600; max-width:11ch;
}

.menu{ display:flex; align-items:center; gap:.35rem; }
.menu a{
  display:block; padding:.6rem .85rem; border-radius:8px;
  color:var(--cafe); font-size:.84rem; font-weight:600; letter-spacing:.04em;
  transition:var(--transicion);
}
.menu a:hover{ background:var(--crema); color:var(--cobre-oscuro); text-decoration:none; }
.menu a[aria-current="page"]{ color:var(--cobre-oscuro); }
.menu a[aria-current="page"]::after{
  content:""; display:block; height:2px; border-radius:2px;
  background:var(--cobre); margin-top:3px;
}
.menu .boton{ margin-left:.6rem; padding:.75rem 1.5rem; font-size:.74rem; }
.menu .boton:hover{ background:var(--cobre-oscuro); color:#fff; }

.abrir-menu{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:1px solid var(--linea); border-radius:10px;
  cursor:pointer; align-items:center; justify-content:center;
}
.abrir-menu span{ position:relative; width:20px; height:2px; background:var(--cafe); display:block; transition:var(--transicion); }
.abrir-menu span::before,.abrir-menu span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--cafe); transition:var(--transicion);
}
.abrir-menu span::before{ top:-6px; }
.abrir-menu span::after{ top:6px; }
.abrir-menu[aria-expanded="true"] span{ background:transparent; }
.abrir-menu[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.abrir-menu[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:980px){
  /* Importante: backdrop-filter convierte a la cabecera en el contenedor de
     referencia de sus hijos "fixed". Si se deja activo, el panel del menu se
     recorta a la altura de la cabecera en lugar de ocupar toda la pantalla. */
  .cabecera{ backdrop-filter:none; background:var(--blanco); }

  .abrir-menu{ display:flex; position:relative; z-index:2; background:var(--blanco); }
  .menu{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw);
    background:#fff; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:.2rem; padding:6rem 1.6rem 2rem;
    clip-path:inset(0 0 0 100%); pointer-events:none;
    transition:clip-path var(--transicion), visibility var(--transicion);
    visibility:hidden;
    box-shadow:-20px 0 60px -30px rgba(59,42,32,.45); overflow-y:auto;
  }
  .menu.abierto{ clip-path:inset(0); pointer-events:auto; visibility:visible; }
  .menu a{ padding:.95rem .6rem; font-size:1rem; border-bottom:1px solid var(--linea); border-radius:0; }
  .menu a[aria-current="page"]::after{ display:none; }
  .menu .boton{ margin:1.2rem 0 0; justify-content:center; font-size:.8rem;
                border-bottom:0; border-radius:50px; }
  .velo{
    position:fixed; inset:0; background:rgba(59,42,32,.40);
    opacity:0; visibility:hidden; transition:var(--transicion); z-index:99;
  }
  .velo.visible{ opacity:1; visibility:visible; }
}

/* --- 6. Portada (hero) ---------------------------------------------------- */
.portada{
  position:relative; min-height:clamp(440px,62vh,640px);
  display:grid; align-items:center; isolation:isolate;
  /* El corte inclinado del pie es el detalle que daba elegancia al original */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--diagonal)), 0 100%);
  padding-bottom:var(--diagonal);
}
/* Filo de cobre que acompana el corte inclinado: es el detalle que remata
   la portada y amarra el degradado con el color de la marca. */
.portada::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(95deg,var(--cobre-logo) 0%,var(--cobre) 45%,#d8a06a 100%);
  clip-path:polygon(0 calc(100% - 11px), 100% calc(100% - var(--diagonal) - 11px),
                    100% calc(100% - var(--diagonal)), 0 100%);
}
.portada__imagen{ position:absolute; inset:0; z-index:-2; }
.portada__imagen img{ width:100%; height:100%; object-fit:cover; }
.portada::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,rgba(52,36,25,.80) 0%,rgba(58,41,28,.56) 42%,rgba(96,67,45,.20) 100%);
}
.portada__texto{ padding:clamp(3.5rem,9vw,6rem) 0; max-width:40rem; }
.portada h1{ color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.25); }
.portada p{
  color:#f7f0e8; font-size:clamp(1rem,1.7vw,1.18rem); margin-bottom:2rem;
  text-shadow:0 1px 12px rgba(40,26,15,.75);
}
.portada .antetitulo{ color:#f0dcc4; text-shadow:0 1px 10px rgba(40,26,15,.7); }
.portada--corta{ min-height:clamp(300px,40vh,420px); }

/* --- 7. Bloques de contenido --------------------------------------------- */
.doble{
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.doble__media{ position:relative; margin:0; }
.doble__media img{
  width:100%; border-radius:var(--radio); box-shadow:var(--sombra);
  outline:1px solid rgba(192,143,93,.35); outline-offset:-1px;
}
.doble__media figcaption{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  background:rgba(192,120,72,.95); color:#fff;
  font-size:.82rem; letter-spacing:.08em; padding:.5rem 1.3rem; border-radius:50px;
  white-space:nowrap;
}

.declaraciones{ display:grid; gap:1.3rem; margin:0 0 2rem; }
.declaracion{
  background:var(--crema); border:1px solid var(--linea); border-left:4px solid var(--cobre-logo);
  border-radius:0 var(--radio) var(--radio) 0; padding:1.6rem 1.8rem;
  box-shadow:0 12px 30px -26px rgba(74,52,37,.55);
  transition:var(--transicion);
}
.declaracion:hover{ transform:translateX(4px); border-left-color:var(--salmon); }
.declaracion h3{ font-family:var(--fuente-texto); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cobre-logo); margin-bottom:.5rem; }
.declaracion p{ font-size:.97rem; }

/* --- 8. Tarjetas de servicio --------------------------------------------- */
.rejilla{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.tarjeta{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:2.4rem 2rem; transition:var(--transicion); height:100%;
  display:flex; flex-direction:column;
}
/* Filete de cobre que aparece arriba al pasar el cursor */
.tarjeta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--cobre-logo),var(--cobre),#e0b184);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.tarjeta:hover::before{ transform:scaleX(1); }
.tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--sombra); border-color:#e2cdb4; }
.tarjeta__icono{
  width:56px; height:56px; border-radius:16px; margin-bottom:1.3rem;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--cobre-logo),var(--cobre));
  color:#fff;
}
.tarjeta__icono svg{ width:26px; height:26px; }
.tarjeta p{ font-size:.95rem; }
.tarjeta__enlace{
  margin-top:auto; padding-top:1.6rem;
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cobre-logo);
}
.tarjeta__enlace svg{ width:15px; height:15px; transition:transform var(--transicion); }
.tarjeta__enlace:hover{ text-decoration:none; color:var(--salmon-oscuro); }
.tarjeta__enlace:hover svg{ transform:translateX(5px); }

/* --- 9. Equipo ------------------------------------------------------------ */
.persona{
  display:grid; gap:clamp(1.8rem,4vw,3.2rem); align-items:center;
  grid-template-columns:minmax(240px,340px) 1fr;
  padding:clamp(2rem,4vw,3rem) 0;
}
.persona + .persona{ border-top:1px solid var(--linea); }
/* En la fila invertida tambien se invierten los anchos de columna, para que
   la foto conserve la columna estrecha y el texto la ancha. */
.persona--invertida{ grid-template-columns:1fr minmax(240px,340px); }
.persona--invertida .persona__foto{ order:2; }
.persona__foto img{ width:100%; border-radius:var(--radio); box-shadow:var(--sombra); aspect-ratio:3/4; object-fit:cover; object-position:top center; }
.persona__cargo{
  font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cobre-logo); display:block; margin-bottom:.35rem;
}
.persona h3{ font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:1rem; }
@media (max-width:760px){
  .persona{ grid-template-columns:1fr; }
  .persona--invertida{ grid-template-columns:1fr; }
  .persona--invertida .persona__foto{ order:0; }
  .persona__foto{ max-width:320px; }
}

/* --- 10. Logotipos (aliados y certificaciones) --------------------------- */
.logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(2rem,6vw,4.5rem);
}
.logos img{
  max-height:74px; width:auto; object-fit:contain;
  opacity:.95; transition:var(--transicion);
}
.logos img:hover{ opacity:1; transform:translateY(-3px); }
.logos--color img{ filter:none; opacity:1; max-height:96px; }

.sello{ display:grid; place-items:center; }
.sello__placa{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:clamp(2rem,4vw,3rem) clamp(2.5rem,6vw,4.5rem);
  box-shadow:0 20px 50px -30px rgba(74,52,37,.5);
  position:relative;
}
/* Esquinas de cobre: detalle de encuadre, discreto */
.sello__placa::before,.sello__placa::after{
  content:""; position:absolute; width:26px; height:26px; border:2px solid var(--cobre);
}
.sello__placa::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; border-radius:var(--radio) 0 0 0; }
.sello__placa::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; border-radius:0 0 var(--radio) 0; }
.sello img{ max-width:260px; }

/* --- 11. Academia (cursos) ----------------------------------------------- */
.cursos{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.curso{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.9rem 1.7rem; display:flex; flex-direction:column; transition:var(--transicion);
}
.curso{ position:relative; overflow:hidden; }
.curso::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg,var(--cobre-logo),var(--cobre));
  transform:scaleY(0); transform-origin:top; transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.curso:hover::before{ transform:scaleY(1); }
.curso:hover{ box-shadow:var(--sombra); transform:translateY(-4px); border-color:#e2cdb4; }
.curso h3{ font-size:1.18rem; margin-bottom:.35rem; }
.curso__duracion{
  display:inline-block; align-self:flex-start;
  background:var(--crema); color:var(--cobre-logo); border:1px solid var(--linea);
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:50px; margin-bottom:1rem;
}
.curso__titulo-lista{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cafe); margin:0 0 .6rem;
}
.curso ul{ font-size:.92rem; display:grid; gap:.4rem; margin-bottom:1.4rem; }
.curso li{ position:relative; padding-left:1.2rem; }
.curso li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--cobre);
}
.curso .boton{ margin-top:auto; align-self:flex-start; padding:.78rem 1.5rem; font-size:.72rem; }

.lista-temas{
  display:grid; gap:.7rem 1.6rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:1.8rem;
}
.lista-temas li{
  background:#fff; border:1px solid var(--linea); border-radius:50px;
  padding:.7rem 1.3rem; font-size:.92rem; font-weight:600; color:var(--cafe);
}

/* --- 12. Galeria ---------------------------------------------------------- */
.galeria{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.galeria button{
  padding:0; border:0; background:none; cursor:zoom-in; border-radius:10px;
  overflow:hidden; aspect-ratio:4/3; display:block; width:100%;
}
.galeria img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter var(--transicion);
}
.galeria button{ position:relative; }
.galeria button::after{
  content:"+"; position:absolute; inset:auto .6rem .6rem auto;
  width:34px; height:34px; border-radius:50%;
  background:rgba(168,98,55,.92); color:#fff;
  display:grid; place-items:center; font-size:1.3rem; line-height:1;
  opacity:0; transform:translateY(8px); transition:var(--transicion);
}
.galeria button:hover::after,
.galeria button:focus-visible::after{ opacity:1; transform:none; }
.galeria button:hover img{ transform:scale(1.07); filter:brightness(1.04) saturate(1.05); }

.visor{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(32,22,16,.95); place-items:center; padding:clamp(1rem,4vw,3rem);
}
.visor.abierto{ display:grid; }
.visor img{ max-width:100%; max-height:82vh; border-radius:10px; box-shadow:0 30px 80px -30px #000; margin-inline:auto; }
.visor__cuenta{ color:#e6d3bb; text-align:center; font-size:.85rem; letter-spacing:.14em; margin-top:1rem; }
.visor button{
  position:absolute; background:rgba(255,255,255,.14); color:#fff;
  border:0; border-radius:50%; width:52px; height:52px; font-size:1.5rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:var(--transicion);
}
.visor button:hover{ background:var(--cobre); }
.visor__cerrar{ top:1.2rem; right:1.2rem; }
.visor__ant{ left:1.2rem; top:50%; transform:translateY(-50%); }
.visor__sig{ right:1.2rem; top:50%; transform:translateY(-50%); }
@media (max-width:620px){
  .visor__ant{ left:.5rem; }
  .visor__sig{ right:.5rem; }
  .visor button{ width:44px; height:44px; }
}

/* --- 13. Formulario ------------------------------------------------------- */
.formulario{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:clamp(1.8rem,4vw,2.8rem); box-shadow:var(--sombra);
}
.campo{ margin-bottom:1.3rem; }
.campo label{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cafe); margin-bottom:.5rem;
}
.campo input,.campo textarea,.campo select{
  width:100%; font-family:inherit; font-size:1rem; color:var(--cafe);
  background:var(--crema); border:1px solid var(--linea); border-radius:10px;
  padding:.9rem 1.1rem; transition:var(--transicion);
}
.campo textarea{ min-height:150px; resize:vertical; }
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none; border-color:var(--cobre); background:#fff;
  box-shadow:0 0 0 4px rgba(192,120,72,.18);
}
.campo .ayuda{ font-size:.8rem; margin:.45rem 0 0; color:var(--cafe-suave); }
.obligatorio{ color:var(--cobre-oscuro); }
.trampa{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.aviso{
  margin-top:1.2rem; padding:.9rem 1.1rem; border-radius:10px; font-size:.92rem;
  background:#fdf0e9; border:1px solid var(--cobre); color:var(--cobre-oscuro);
}

.datos-contacto{ display:grid; gap:1.2rem; }
.dato{ display:flex; gap:1rem; align-items:flex-start; }
.dato__icono{
  flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--crema); color:var(--cobre-oscuro); border:1px solid var(--linea);
}
.dato__icono svg{ width:20px; height:20px; }
.dato strong{ display:block; color:var(--cafe); font-size:.95rem; }
.dato a{ font-size:.95rem; }

/* --- 14. Llamada final y pie --------------------------------------------- */
.llamada{
  background:linear-gradient(100deg,#9a572e 0%,var(--cobre-logo) 45%,#9f5a31 100%);
  color:#f6ecdf; text-align:center;
}
.llamada h2{ color:#fff; }
.llamada p{ max-width:48ch; margin-inline:auto; color:#f1e5d9; }
.llamada .boton{ margin-top:1.8rem; }
.llamada .boton--primario{
  background:var(--blanco); color:var(--cobre-oscuro);
  box-shadow:0 16px 36px -18px rgba(40,25,12,.85);
}
.llamada .boton--primario:hover{ background:var(--cafe); color:#fff; }
.llamada .antetitulo{ color:#f6ecdf !important; }

.pie{ background:linear-gradient(170deg,#3a2a1e 0%,#32241a 55%,#2b1f16 100%);
  border-top:3px solid var(--cobre); color:#d8c8ba; font-size:.92rem; padding:clamp(3rem,6vw,4.5rem) 0 0; }
.pie__rejilla{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.pie h4{ color:#fff; font-family:var(--fuente-texto); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.1rem; }
.pie a{ color:#d8c8ba; }
.pie a:hover{ color:#fff; }
.pie li{ margin-bottom:.55rem; }
.pie__marca{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.pie__marca img{ width:60px; height:60px; object-fit:contain; background:#fdf9f4; border-radius:12px; padding:5px; }
.pie__marca span{ font-family:var(--fuente-titulo); color:#fff; font-size:1.05rem; line-height:1.2; }
.pie__base{
  margin-top:3rem; border-top:1px solid rgba(255,255,255,.14);
  padding:1.4rem 0; font-size:.82rem; text-align:center;
}

/* --- 15. Boton flotante de WhatsApp -------------------------------------- */
.whatsapp{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90;
  width:58px; height:58px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center; box-shadow:0 12px 30px -10px rgba(37,211,102,.75);
  transition:var(--transicion);
}
.whatsapp:hover{ transform:scale(1.08); color:#fff; }
.whatsapp svg{ width:30px; height:30px; }

/* --- 16. Animacion de entrada -------------------------------------------- */
.revelar{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.revelar.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .revelar{ opacity:1; transform:none; }
}

/* --- 17. Impresion -------------------------------------------------------- */
@media print{
  .cabecera,.whatsapp,.llamada,.pie,.abrir-menu{ display:none !important; }
  body{ color:#000; }
}

/* Variante del bloque de dos columnas con el contenido alineado arriba. */
.doble--arriba{ align-items:start; }

/* En pantallas angostas el texto de la portada ocupa todo el ancho, asi que el
   degradado lateral deja de proteger la lectura: se usa uno vertical mas firme. */
@media (max-width:760px){
  .portada::after{
    background:linear-gradient(180deg,rgba(52,36,25,.76) 0%,rgba(58,41,28,.68) 55%,rgba(52,36,25,.82) 100%);
  }
}

/* --- 18. Cinta decorativa entre secciones --------------------------------
   Reproduce la franja angular de dos tonos del sitio original (#c08f5d
   sobre #dfc7ae). Es puramente decorativa: va con aria-hidden. */
.franja{ display:block; line-height:0; }
.franja svg{ display:block; width:100%; height:clamp(34px,4vw,58px); }

/* Sobre fondo crema, la cinta necesita el mismo crema debajo */
.franja--crema svg .franja__base{ fill:var(--crema); }