/* Sobre y Lacre · papelería de boda sobre lino: verde bosque, marfil y oro viejo */
:root{
  --lino:#EFE6D6;
  --marfil:#FBF8F2;
  --bosque:#1F3D2B;     /* color de marca */
  --bosque-2:#2C4F3A;
  --salvia:#7E8F6E;
  --oro:#A88A4E;
  --tinta:#2B2A26;
  --suave:#6B655A;
  --linea:rgba(43,42,38,.14);
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --sans:Jost,"Avenir Next",system-ui,sans-serif;
  --mano:Caveat,"Bradley Hand",cursive;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--lino) url(../img/lino.jpg) center top/740px auto;color:var(--tinta);font:300 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{text-wrap:balance;font-weight:400}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
[hidden]{display:none!important}
.envoltura{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* Rótulos pequeños espaciados, como en la papelería impresa */
.antetitulo{font:400 12px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--oro)}
.mano{font-family:var(--mano);font-weight:500}

/* Cabecera */
.cab{position:relative;z-index:30;background:rgba(239,230,214,.86);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.cab.scroll{border-bottom-color:var(--linea)}
.cab .envoltura{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{font:500 26px/1 var(--serif);letter-spacing:.02em;text-decoration:none;color:var(--bosque);white-space:nowrap}
.logo i{font-style:italic;color:var(--oro)}
.cab nav{display:flex;gap:28px;align-items:center}
.cab nav a:not(.btn){font:400 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--suave)}
.cab nav a:not(.btn):hover{color:var(--bosque)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;font:400 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:17px 28px;text-decoration:none;color:var(--bosque);background:transparent;border:1px solid var(--bosque);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.btn:hover{background:var(--bosque);color:var(--marfil)}
.btn.lleno{background:var(--bosque);color:var(--marfil)}
.btn.lleno:hover{background:var(--bosque-2)}
.btn.peq{padding:12px 18px;font-size:11px}

/* Secciones */
.sec{padding-block:112px;position:relative}
.sec.marfil{background:rgba(251,248,242,.62)}
.sec.bosque{background:var(--bosque);color:var(--marfil)}
.sec.bosque .antetitulo{color:#C9B27E}
.titulo{text-align:center;max-width:780px;margin:0 auto}
.titulo h2{font:400 clamp(38px,4.8vw,60px)/1.08 var(--serif);color:var(--bosque);margin-top:14px}
.sec.bosque .titulo h2{color:var(--marfil)}
.titulo h2 em{font-style:italic;color:var(--oro)}
.titulo p{color:var(--suave);font-size:18px;margin:18px auto 0;max-width:36em}
.sec.bosque .titulo p{color:#C7D0C3}
.orn{display:block;width:120px;height:12px;margin:22px auto 0}

/* Marcos de dispositivo con iframe escalado */
.encaja{position:relative;overflow:hidden;background:var(--lino)}
.encaja iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0}
/* El borde se mide con el ancho del propio móvil (cqw), no con el del contenedor: así es igual de fino en cualquier tamaño */
.movil{position:relative;container-type:inline-size;background:#1C1C1C;border-radius:13%/6.2%;padding:0;box-shadow:0 34px 60px -30px rgba(31,61,43,.55),0 0 0 1px rgba(0,0,0,.4)}
.movil .encaja{margin:9px;margin:2.8cqw;border-radius:10.5%/4.9%}
.movil .muesca{position:absolute;top:2.4%;left:50%;transform:translateX(-50%);width:28%;height:2.6%;background:#1C1C1C;border-radius:999px;z-index:2}
.navegador{background:var(--marfil);border-radius:10px;overflow:hidden;box-shadow:0 34px 60px -34px rgba(31,61,43,.55),0 0 0 1px var(--linea)}
.navegador .barra{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#F4EFE6;border-bottom:1px solid var(--linea)}
.navegador .barra i{width:10px;height:10px;border-radius:50%;background:#D9D0C1}
.navegador .barra span{margin-left:10px;flex:1;max-width:340px;background:#fff;border:1px solid var(--linea);border-radius:999px;font-size:12px;color:var(--suave);padding:3px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:720px){.cab nav a:not(.btn){display:none}.logo{font-size:22px}}