/* Paleta sacada del centro de Florida, que no es la playa: ciprés, piedra caliza y
   naranjo. Papel con matiz verde a propósito — el crema tibio es el fondo por
   defecto de todo el mundo y no dice nada de este lugar. */
:root{
  --papel:#F4F6F3; --tarjeta:#FFFFFF; --tinta:#131C18; --suave:#5C6862;
  --linea:#DDE3DE; --cipres:#1B4D3E; --cipres-tinte:#EAF1ED; --citrico:#C8621B;
  --sombra:0 1px 2px rgba(19,28,24,.04), 0 8px 24px -12px rgba(19,28,24,.14);
  --serif:'Iowan Old Style','Charter','Palatino Linotype',Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --papel:#101512; --tarjeta:#161D19; --tinta:#E7ECE8; --suave:#98A49D;
  --linea:#28322C; --cipres:#6FB79C; --cipres-tinte:#17241F; --citrico:#E0913F;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}}
:root[data-theme=dark]{
  --papel:#101512; --tarjeta:#161D19; --tinta:#E7ECE8; --suave:#98A49D;
  --linea:#28322C; --cipres:#6FB79C; --cipres-tinte:#17241F; --citrico:#E0913F;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:39rem;margin:0 auto;padding:clamp(28px,7vw,60px) 22px 64px;
  display:flex;flex-direction:column;gap:34px}

/* Cabecera. El nombre en serif, y una regla fina debajo: el umbral. */
header{display:flex;flex-direction:column;gap:14px}
.nombre{font-family:var(--serif);font-size:clamp(30px,7.5vw,42px);line-height:1.08;
  margin:0;letter-spacing:-.015em;text-wrap:balance;font-weight:600}
.umbral{height:2px;width:56px;background:var(--cipres);border-radius:2px}
.umbral::after{content:"";display:block;height:2px;width:14px;margin-left:64px;
  background:var(--citrico);border-radius:2px}
.credenciales{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;
  font-size:13px;color:var(--suave);font-variant-numeric:tabular-nums}
.credenciales li{display:flex;align-items:center;gap:6px}
.credenciales li+li::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--linea);margin-right:8px;margin-left:-6px}

/* Las dos lenguas pesan lo mismo. Es el punto de una agente bilingüe. */
.promesa{display:grid;gap:10px;margin:0}
.promesa p{margin:0;font-size:17px;line-height:1.55;text-wrap:pretty}
.promesa p+p{color:var(--suave);font-size:16px}

.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
  padding:clamp(20px,4.5vw,30px);box-shadow:var(--sombra)}
h2{font-family:var(--serif);font-size:20px;line-height:1.3;margin:0 0 12px;
  letter-spacing:-.01em;font-weight:600}
.doc h2{font-size:17px;margin:30px 0 8px}
.doc h2:first-of-type{margin-top:0}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}

form{display:flex;flex-direction:column;gap:2px}
label{font-size:13px;font-weight:600;color:var(--suave);margin:18px 0 6px;display:block}
label .opc{font-weight:400;color:var(--suave);opacity:.75}
input[type=text],input[type=tel],input[type=email],textarea{
  width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:9px;
  background:var(--papel);color:var(--tinta);font:inherit;font-size:16px;
  transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:78px;line-height:1.5}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--citrico);outline-offset:2px}
input:focus,textarea:focus{border-color:var(--cipres);
  box-shadow:0 0 0 3px var(--cipres-tinte)}
input::placeholder,textarea::placeholder{color:var(--suave);opacity:.6}

/* La casilla es el motivo por el que esta página existe. Se le da ese peso. */
.check{display:flex;gap:12px;align-items:flex-start;margin:26px 0 4px;padding:16px;
  background:var(--cipres-tinte);border:1px solid var(--linea);border-radius:11px}
.check input{width:19px;height:19px;flex:0 0 19px;margin:2px 0 0;accent-color:var(--cipres);
  cursor:pointer}
.check span{font-size:12.5px;line-height:1.55;color:var(--tinta)}
.check .es{display:block;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--linea);color:var(--suave)}

button{margin-top:22px;width:100%;padding:14px;border:0;border-radius:9px;
  background:var(--cipres);color:var(--papel);font:inherit;font-weight:650;font-size:16px;
  letter-spacing:.01em;cursor:pointer;transition:filter .15s,transform .06s}
button:hover{filter:brightness(1.12)}
button:active{transform:translateY(1px)}
:root[data-theme=dark] button{color:#0C1310}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) button{color:#0C1310}}

.legal{font-size:13px;line-height:1.65;color:var(--suave)}
.legal a{color:var(--suave)}
.doc .legal{font-size:14.5px;color:var(--tinta)}
.doc .legal.tenue{color:var(--suave)}
/* La frase que los operadores buscan. Marcada, porque es la que carga el peso. */
.clave{border-left:3px solid var(--cipres);background:var(--cipres-tinte);
  border-radius:0 9px 9px 0;padding:14px 16px;margin:0 0 14px;font-size:14.5px;
  line-height:1.6;color:var(--tinta)}
a{color:var(--cipres);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

.ok{text-align:center;padding:8px 0}
.ok .marca{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;
  background:var(--cipres-tinte);border:1px solid var(--linea);display:grid;
  place-items:center;color:var(--cipres);font-size:21px;line-height:1}

footer{border-top:1px solid var(--linea);padding-top:20px;font-size:12.5px;
  color:var(--suave);display:flex;flex-direction:column;gap:8px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.identidad{display:flex;align-items:center;gap:16px}
.retrato{width:76px;height:76px;flex:0 0 76px;border-radius:50%;object-fit:cover;
  border:1px solid var(--linea);background:var(--cipres-tinte)}
.monograma{display:grid;place-items:center;font-family:var(--serif);font-size:32px;
  font-weight:600;color:var(--cipres);line-height:1}
.rol{margin:4px 0 0;font-size:14px;color:var(--suave)}
.redes{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.red{display:inline-flex;align-items:center;gap:7px;font-size:13px;text-decoration:none;
  color:var(--suave);border:1px solid var(--linea);background:var(--tarjeta);
  padding:6px 13px 6px 11px;border-radius:99px;transition:color .15s,border-color .15s}
.red:hover{color:var(--cipres);border-color:var(--cipres)}
.red svg{width:15px;height:15px}
.servicios{display:grid;gap:2px}
.servicios article{padding:18px 0;border-top:1px solid var(--linea)}
.servicios article:first-child{border-top:0;padding-top:0}
.servicios h3{font-family:var(--serif);font-size:17px;margin:0 0 7px;font-weight:600}
.servicios h3 span{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--suave)}
.servicios p{font-size:14.5px;line-height:1.6;margin:0 0 7px}
.servicios p.es{color:var(--suave);margin:0}
.es-inline{display:block;margin-top:6px;color:var(--suave)}
.zonas{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.zonas li{font-size:13px;padding:5px 12px;border:1px solid var(--linea);
  border-radius:99px;background:var(--tarjeta);color:var(--suave)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}