/* Tipografias auto-alojadas. Cero llamadas a Google: no se filtra
   la IP del visitante a terceros y la CSP puede quedar en 'self' puro. */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;            /* fuente variable: un archivo, todos los pesos */
  font-display:swap;
  src:url('assets/fonts/inter-variable.woff2') format('woff2');
}

@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/playfair-display-700.woff2') format('woff2');
}

:root{
    --mk-primario:#1c2e4a;
    --mk-secundario:#8a7248;
    --mk-fondo:#f5f1e8;
    --mk-texto:#1c2e4a;
    --cream:#f5f1e8;
    --navy:#1c2e4a;
    --navy-deep:#121f34;
    --gold:#8a7248;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:hidden;}

  /* Los navegadores embebidos (Instagram, Facebook, TikTok) a veces inflan
     el tamano del texto por su cuenta y descuadran el diseno. Esto lo impide
     sin afectar el zoom manual del usuario. */
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  /* Las imagenes llevan width/height en el HTML para que el navegador
     reserve el espacio y no haya salto de layout al cargar. Pero si el
     CSS no aclara height:auto, el navegador toma esa altura al pie de la
     letra y deja un hueco enorme. Esta regla global lo evita siempre,
     para cualquier imagen presente o futura. */
  img{ max-width:100%; height:auto; }
  body{
    font-family:"Inter",system-ui,sans-serif;
    background:var(--cream);
    color:var(--navy);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,.serif{font-family:"Playfair Display",Georgia,serif;}
  a{color:inherit;}
  ul{margin:0;padding:0;list-style:none;}

  /* --- Header fijo --- */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:500;
    display:flex; align-items:center; justify-content:space-between;
    padding:.7rem clamp(1rem,4vw,2.5rem);
    background:color-mix(in srgb, var(--cream) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid color-mix(in srgb, var(--navy) 12%, transparent);
  }
  .brand{display:flex; align-items:center; gap:.6rem; text-decoration:none;}
  .brand-logo{height:44px; width:auto; display:block;}
  .header-actions{display:flex; align-items:center; gap:.6rem;}
  .tel-link{
    font-weight:600; font-size:clamp(.8rem,2vw,.95rem); text-decoration:none;
    color:var(--navy); white-space:nowrap;
  }
  .btn-whatsapp{
    background:var(--navy); color:var(--cream); text-decoration:none;
    padding:.55rem 1.1rem; border-radius:999px; font-weight:600;
    font-size:clamp(.75rem,2vw,.88rem); white-space:nowrap;
    transition:transform .25s, background .25s;
  }
  .btn-whatsapp:hover{transform:translateY(-2px); background:var(--gold);}

  /* --- Inicio (estático, sin efectos de scroll) --- */
  .hero{
    margin:68px auto 0; max-width:1180px;
    display:grid; grid-template-columns:1.02fr .98fr; align-items:center;
    gap:clamp(2rem,5vw,4rem);
    padding:clamp(2.5rem,7vh,4.5rem) clamp(1.25rem,5vw,3rem);
    padding:clamp(2.5rem,7dvh,4.5rem) clamp(1.25rem,5vw,3rem);
  }
  .hero-text{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:1rem; }
  .hero-logo{ width:min(42vw,190px); height:auto; margin-bottom:.25rem; }
  .hero h1{ font-size:clamp(1.9rem,4.1vw,2.9rem); line-height:1.14; margin:0; max-width:22ch; }
  .hero-sub{ font-size:clamp(1.05rem,2.6vw,1.3rem); opacity:.85; margin:0; }
  .hero-tagline{ font-size:clamp(.95rem,2.2vw,1.1rem); opacity:.7; margin:0; }
  .hero-actions{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.9rem; margin-top:.75rem; }
  /* --- Retrato con profundidad 3D --- */
  .hero-photo-wrap{ perspective:1300px; perspective-origin:55% 45%; padding:1.4rem 2.2rem 2.2rem 1.4rem; }
  .photo-3d{
    position:relative; transform-style:preserve-3d;
    transform:rotateY(var(--ry,-5deg)) rotateX(var(--rx,1.5deg));
    transition:transform .5s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }
  /* Placa de la marca, hundida y desplazada: es la que crea el volumen real */
  .photo-plate{
    position:absolute; inset:0; border-radius:20px; pointer-events:none;
    background:linear-gradient(140deg, var(--navy) 0%, var(--navy-deep) 100%);
    transform:translateZ(-60px) translate(30px,30px);
  }
  /* Filo dorado que asoma por el lado contrario a la placa: equilibra el volumen */
  .photo-accent{
    position:absolute; inset:0; border-radius:20px; pointer-events:none;
    border:2px solid var(--gold);
    transform:translateZ(-24px) translate(-16px,-16px);
  }
  .hero-photo{
    position:relative; width:100%; height:auto; max-height:560px;
    object-fit:cover; object-position:center 18%;
    display:block; border-radius:20px; transform:translateZ(0);
    border:1px solid color-mix(in srgb, var(--cream) 55%, transparent);
    /* sombra por capas: contacto + media distancia + ambiente */
    box-shadow:
      0 2px 4px rgba(18,31,52,.10),
      0 8px 18px rgba(18,31,52,.13),
      0 26px 50px rgba(18,31,52,.18),
      0 52px 92px rgba(18,31,52,.16);
  }

  @media (prefers-reduced-motion: reduce){
    .photo-3d{ transform:none !important; transition:none; }
  }

  @media (max-width:860px){
    .hero{ grid-template-columns:1fr; gap:1.4rem; text-align:center; padding-top:1.75rem; }
    .hero-text{ align-items:center; text-align:center; gap:.75rem; }
    .hero-logo{ width:min(32vw,125px); margin-bottom:0; }
    .hero h1{ max-width:20ch; }
    .hero-actions{ justify-content:center; margin-top:.4rem; }
    /* En celular no hay mouse: sin giro, con la profundidad en escala menor */
    .hero-photo-wrap{ order:-1; perspective:none; padding:.8rem 1rem 1rem .8rem; max-width:420px; margin:0 auto; }
    .photo-3d{ transform:none; }
    .photo-plate{ transform:translate(13px,13px); }
    .photo-accent{ transform:translate(-8px,-8px); }
    /* 'vh' mide el viewport GRANDE (con las barras del navegador ocultas).
       En el navegador interno de Instagram, con sus barras a la vista, el area
       real es menor: la foto se comia el espacio del titulo y los botones.
       'dvh' mide el alto realmente visible en cada momento.
       La primera linea queda como respaldo para navegadores sin soporte dvh. */
    .hero-photo{ max-height:34vh; object-position:center 14%; }
    .hero-photo{ max-height:34dvh; }
  }
  .btn-primary{
    background:var(--navy); color:var(--cream); text-decoration:none; font-weight:700;
    padding:.9rem 1.8rem; border-radius:999px; font-size:clamp(.9rem,2.2vw,1.05rem);
    display:inline-block; transition:transform .25s, background .25s;
  }
  .btn-primary:hover{ transform:translateY(-2px); background:var(--navy-deep); }
  .btn-whatsapp-lg{
    background:var(--gold); color:var(--navy-deep); text-decoration:none; font-weight:700;
    padding:.9rem 1.8rem; border-radius:999px; font-size:clamp(.9rem,2.2vw,1.05rem);
    display:inline-block; transition:transform .25s;
  }
  .btn-whatsapp-lg:hover{ transform:translateY(-2px); }

  /* --- Footer estático --- */
  .site-footer{ background:var(--navy-deep); color:var(--cream); padding:clamp(3rem,8vw,6rem) clamp(1.25rem,6vw,4rem) 2rem; }
  .footer-cta{ text-align:center; max-width:720px; margin:0 auto clamp(2.5rem,6vw,4rem); }
  .footer-cta h2{ font-size:clamp(1.6rem,4vw,2.4rem); margin:0 0 1rem; }
  .footer-phone{
    font-family:"Playfair Display",serif; font-weight:700; text-decoration:none;
    font-size:clamp(1.8rem,5vw,2.6rem); color:var(--gold); display:inline-block; margin-bottom:1rem;
  }
  .footer-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; }
  .btn-email{ color:var(--cream); text-decoration:underline; align-self:center; font-size:.95rem; }

  .footer-info{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem;
    max-width:900px; margin:0 auto clamp(2.5rem,6vw,3.5rem); border-top:1px solid rgba(245,241,232,.15);
    border-bottom:1px solid rgba(245,241,232,.15); padding:2rem 0;
  }
  .footer-info h3{ font-family:"Playfair Display",serif; font-size:1.15rem; margin:0 0 .5rem; color:var(--gold); }
  .footer-info p{ margin:0 0 .5rem; line-height:1.5; opacity:.92; }
  .footer-info a{ text-decoration:underline; }

  .footer-about{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem;
    max-width:900px; margin:0 auto clamp(2.5rem,6vw,3.5rem);
  }
  .footer-about h3{ font-family:"Playfair Display",serif; font-size:1.15rem; margin:0 0 .6rem; color:var(--gold); }
  .footer-about p{ margin:0 0 .7rem; line-height:1.6; font-size:.92rem; opacity:.92; }
  .footer-about strong{ color:#fff; }

  .footer-services{ max-width:900px; margin:0 auto; }
  .footer-services h3{ font-family:"Playfair Display",serif; font-size:1.3rem; text-align:center; margin:0 0 1.2rem; }
  .footer-services details{
    border-bottom:1px solid rgba(245,241,232,.15); padding:.8rem 0;
  }
  .footer-services summary{ cursor:pointer; font-weight:600; font-size:1.02rem; }
  .footer-services summary::marker{ color:var(--gold); }
  .footer-services ul{ margin:.8rem 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.35rem .8rem; }
  .footer-services li{ font-size:.88rem; opacity:.9; line-height:1.4; }

  /* --- Información legal --- */
  .footer-legal{ max-width:900px; margin:clamp(2.5rem,6vw,3.5rem) auto 0; }
  .footer-legal h3{
    font-family:"Playfair Display",serif; font-size:1.3rem;
    text-align:center; margin:0 0 1.2rem;
  }
  .footer-legal details{
    border-bottom:1px solid rgba(245,241,232,.15); padding:.8rem 0;
  }
  .footer-legal summary{ cursor:pointer; font-weight:600; font-size:1.02rem; }
  .footer-legal summary::marker{ color:var(--gold); }

  .legal-texto{ margin:1rem 0 .5rem; max-width:70ch; }
  .legal-texto h4{
    font-family:"Playfair Display",serif; font-weight:700;
    font-size:1rem; color:var(--gold);
    margin:1.4rem 0 .4rem;
  }
  .legal-texto h4:first-child{ margin-top:.4rem; }
  .legal-texto p{ margin:0 0 .7rem; font-size:.86rem; line-height:1.65; opacity:.9; }
  .legal-texto strong{ color:#fff; font-weight:600; }
  .legal-texto a{ color:var(--gold); text-decoration:underline; }
  .legal-lista{ margin:0 0 .9rem; display:block; }
  .legal-lista li{
    position:relative; padding-left:1.1em; margin-bottom:.55rem;
    font-size:.86rem; line-height:1.6; opacity:.9;
  }
  .legal-lista li::before{ content:"·"; position:absolute; left:.2em; color:var(--gold); }
  /* Leyendas que exige la normativa: se distinguen del resto */
  .legal-nota{
    border-left:2px solid var(--gold); padding-left:.9rem;
    font-style:italic; opacity:.78 !important; font-size:.82rem !important;
  }

  /* --- Textos centrados por decision del cliente ---
     Esto vive aca y NO como style="..." en el HTML a proposito:
     la CSP estricta (style-src 'self') bloquea los atributos inline,
     asi que puestos en el HTML el centrado se perdia al publicar. */
  .footer-about p,
  .legal-texto p,
  .legal-texto .legal-lista li{ text-align:center; }

  /* Con el texto centrado, la vinieta absoluta quedaba suelta a la
     izquierda: pasa a fluir junto al texto. */
  .legal-texto .legal-lista li{ padding-left:0; }
  .legal-texto .legal-lista li::before{ content:"· "; position:static; }

  /* --- Footer centrado en pantallas chicas ---
     En escritorio los bloques van en dos columnas y se ven equilibrados.
     Al apilarse en una sola columna quedaban pegados a la izquierda,
     desalineados respecto de los titulos que si estaban centrados. */
  @media (max-width:860px){
    .footer-info,
    .footer-about{ text-align:center; }

    .footer-info h3,
    .footer-about h3{ text-align:center; }

    /* El acordeon se centra en su encabezado, pero las listas de servicios
       y el texto legal siguen alineados a la izquierda: son textos largos
       y centrarlos dificulta la lectura. */
    .footer-services summary,
    .footer-legal summary{
      text-align:center;
      list-style:none;              /* se quita el triangulo por defecto, */
    }                               /* que al centrar quedaba suelto a la izquierda */
    .footer-services summary::-webkit-details-marker,
    .footer-legal summary::-webkit-details-marker{ display:none; }

    /* Flecha propia, pegada al texto centrado, que gira al desplegar:
       conserva la senal de que el bloque se puede abrir. */
    .footer-services summary::after,
    .footer-legal summary::after{
      content:"\25B8"; color:var(--gold);
      display:inline-block; margin-left:.45em;
      transition:transform .2s ease;
    }
    .footer-services details[open] > summary::after,
    .footer-legal details[open] > summary::after{ transform:rotate(90deg); }

    .footer-services ul{ text-align:left; }
    .legal-texto{ margin-left:auto; margin-right:auto; }
  }

  @media (max-width:560px){
    .brand-logo{height:36px;}
    .footer-services ul{grid-template-columns:1fr;}
  }