/* Web de JGV Studio. Colores, letras y marca vienen de /assets/jgv.css */
:root{--cal:var(--sal);--cal2:var(--beige);--monte:var(--cant);--almagre:var(--verdin);--ambar:var(--concha);--melocoton:var(--arena);--lila:var(--concha);--soft:#6B645A;--piedra:#8C8376;--vacio:#E0D4C0}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{font-size:17px;line-height:1.55}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.005em}
img{width:100%;height:100%;object-fit:cover}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.saltar{position:absolute;left:-9999px;top:10px;background:var(--cant);color:var(--sal);padding:10px 16px;border-radius:8px;z-index:50}
.saltar:focus{left:10px}
.vacio{background:var(--vacio)}
.btn.lleno{background:var(--concha);color:var(--cant)}
.btn.lleno:hover{background:var(--sal)}
.btn.borde{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.borde:hover{background:var(--cant);color:var(--sal);box-shadow:none}

/* ─── Cabecera ─── */
.cab{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;height:96px;padding:0 48px;background:var(--cal)}
.cab .menu{display:flex;align-items:center;gap:34px;font-size:15px;font-weight:500}
.cab .menu a{text-decoration:none}
.cab .menu a:not(.btn):hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.cab .menu .btn{padding:12px 22px;font-size:14px;margin-left:10px}
.cab .abre{display:none;background:none;border:0;font-weight:600;cursor:pointer;padding:10px 0}

/* ─── Portada: foto, medio sol y la banda con el titular ─── */
.portada{position:relative;height:624px;background:var(--arena)}
.portada>img{position:absolute;inset:0;object-position:50% 58%}
.sol-grande{position:absolute;z-index:1;left:46%;bottom:-78px;width:156px;height:156px;border-radius:50%;background:var(--ambar)}
.banda{position:relative;z-index:2;background:var(--melocoton);padding:54px 0 76px}
.banda .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:end}
.banda h1{font-size:66px;line-height:1.02}
.banda p{font-size:18px;color:var(--soft);max-width:440px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ─── Un recuerdo, no solo una foto ─── */
.mani{padding:130px 0 120px}
.mani .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.mani h2{font-size:54px;margin-bottom:28px}
.mani p{font-size:19px;max-width:520px;margin-bottom:18px;color:#5A5349}
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:end}
.duo div{border-radius:4px;overflow:hidden}
.duo div:first-child{height:520px}.duo div:last-child{height:380px}

/* ─── Sesiones ─── */
.ses{padding:20px 0 120px}
.ses h2{font-size:56px;margin-bottom:46px}
.fila{display:grid;grid-template-columns:150px 1fr 330px;gap:40px;align-items:center;padding:26px 28px;border-radius:10px;margin-bottom:6px}
.fila:nth-child(even){background:var(--cal2)}
.fila .ft{height:184px;border-radius:4px;overflow:hidden}
.fila h3{font-size:40px;margin-bottom:10px}
.fila p{color:var(--soft);max-width:520px}
.fila .dat{font-size:15px}
.fila .precio{font-family:var(--serif);font-size:40px;line-height:1;margin:6px 0 12px}
.fila .hora{font-size:14.5px;color:var(--almagre);font-weight:600;text-decoration:none}
.fila .hora:hover{text-decoration:underline;text-underline-offset:4px}

/* ─── Carrete ─── */
.carrete{background:var(--lila);padding:110px 0}
.carrete .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
.carrete h2{font-size:64px;margin-bottom:26px}
.carrete p{font-size:19px;color:#5A5349;max-width:480px;margin-bottom:28px}
.etiqueta{display:inline-block;background:var(--monte);color:var(--ambar);font-weight:600;padding:10px 18px;border-radius:999px;font-size:15px}
.carrete .fotos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.carrete .fotos div{height:440px;border-radius:4px;overflow:hidden}
.carrete .fotos div:last-child{margin-top:70px;height:370px}

/* ─── Trabajo realizado ─── */
.trab{padding:120px 0 100px}
.trab h2{font-size:64px;margin-bottom:40px}
.just{display:flex;gap:12px;margin-bottom:12px}
.just div{height:380px;min-width:0;border-radius:3px;overflow:hidden}

/* ─── Sobre mí: el retrato de Jon con el sol asomando detrás ─── */
.bio{background:var(--melocoton);padding:120px 0;overflow:hidden}
.bio .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}
.bio .retrato{position:relative;max-width:440px}
.bio .retrato>div{position:relative;z-index:1;height:600px;border-radius:4px;overflow:hidden}
.bio .retrato img{object-position:50% 42%}
.sol-bio{position:absolute;z-index:0;right:-62px;top:-58px;width:150px;height:150px;border-radius:50%;background:var(--ambar)}
.bio h2{font-size:64px;margin-bottom:30px}
.bio p{font-size:18px;color:#5A5349;max-width:540px;margin-bottom:18px}
.bio p.ent{font-family:var(--serif);font-size:27px;line-height:1.25;color:var(--cant);margin-bottom:24px}
.bio .ctas{margin-top:14px}
.bio + .como{padding-top:120px}

/* ─── Cómo reservar: el sol se va poniendo en cada paso ─── */
.como{padding:40px 0 120px}
.como .wrap{display:grid;grid-template-columns:.8fr 2fr;gap:60px}
.como h2{font-size:54px}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;padding-top:52px;list-style:none}
.pasos::before{content:"";position:absolute;top:16px;left:0;right:0;height:2px;background:var(--monte)}
.paso{position:relative}
.paso .s{position:absolute;top:-52px;left:0;width:34px;height:17px;overflow:hidden}
.paso .s i{position:absolute;left:0;width:34px;height:34px;border-radius:50%;background:var(--almagre)}
.paso h3{font-size:25px;margin-bottom:10px}
.paso p{font-size:15.5px;color:var(--soft)}

/* ─── Galería privada ─── */
.gal{background:var(--cal2);padding:100px 0}
.gal .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.gal h2{font-size:54px;margin-bottom:22px}
.gal p{font-size:18px;color:#5A5349;max-width:460px;margin-bottom:28px}
.movil{width:300px;height:600px;border-radius:38px;background:var(--monte);padding:12px;margin:0 auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.movil .pant{width:100%;height:100%;border-radius:28px;overflow:hidden;background:var(--cal)}
/* dentro del móvil, la galería del cliente tal como se ve en un teléfono de 390 px, reducida a escala */
.movil .esc{width:390px;transform-origin:0 0;transform:scale(.7077);background:var(--cal);pointer-events:none}
.movil .mtop{display:flex;align-items:center;height:60px;padding:0 18px;background:var(--beige)}
.movil .mtop .marca{font-size:21px}
.movil .mcov{padding:16px 16px 0}
.movil .mcov img{width:100%;height:auto;border-radius:3px}
.movil .mtxt{text-align:center;padding:28px 18px 0}
.movil h4{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.02;margin-bottom:12px}
.movil .mtxt p{font-size:17px;margin:0;max-width:none;color:var(--monte)}
.movil .mtxt .n{font-size:15px;color:var(--cant-70);margin-top:2px}
.movil .mtxt .i{font-size:16px;color:var(--cant-70);margin:16px auto 0;max-width:32ch}
.movil .mb{display:flex;gap:10px;justify-content:center;margin-top:22px}
.movil .mb .btn{font-size:15px;padding:12px 22px}
.movil .mesc{display:flex;justify-content:center;gap:8px;padding:30px 0 22px}
.movil .mesc span{padding:9px 18px;border-radius:999px;background:var(--cant-06);font-size:15px}
.movil .mesc span.on{background:var(--cant);color:var(--sal)}
.movil .mg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 6px}
.movil .mg div{height:170px;overflow:hidden}

/* ─── Contacto ─── */
.cont{background:var(--almagre);color:var(--cal);padding:120px 0 110px}
.cont .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:90px}
.cont h2{font-size:60px;margin-bottom:30px}
.cont .datos{font-size:17px;line-height:2;color:#EFE6D8}
.cont .datos a{color:var(--cal);font-weight:600;text-decoration:none}
.cont .datos a:hover{text-decoration:underline}
.cont .datos p{margin-top:18px;max-width:380px;line-height:1.6}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start}
.form label{display:block;font-size:13.5px;color:#E3D6C2}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:7px;height:54px;border-radius:10px;background:rgba(247,241,231,.1);border:1.5px solid rgba(247,241,231,.18);padding:0 16px;font-size:16px;color:var(--cal);-webkit-appearance:none;appearance:none}
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F7F1E7' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form select option{color:var(--cant)}
.form textarea{height:130px;padding:15px 16px;resize:vertical;line-height:1.5}
.form ::placeholder{color:#C9BBA6}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--concha);outline-offset:1px}
.form .ancho{grid-column:1/-1}
.form .trampa{position:absolute;left:-9999px}
.form .legalito{grid-column:1/-1;font-size:13.5px;color:#E3D6C2}
.form .legalito a{color:inherit}
.form .estado{grid-column:1/-1;font-weight:600;min-height:1.5em}
.form.hecho input,.form.hecho select,.form.hecho textarea,.form.hecho button{opacity:.5;pointer-events:none}
.cont :focus-visible{outline-color:var(--concha)}

/* ─── Pie ─── */
.pie{background:var(--melocoton);color:var(--soft);padding:60px 0 40px;font-size:15px}
.pie .wrap.arriba{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.pie .marca{color:var(--monte)}
.pie p{margin-top:18px;max-width:300px}
.pie .cols{display:flex;gap:80px}
.pie .cols div{line-height:2}
.pie .cols b{display:block;color:var(--monte);font-weight:600}
.pie .cols a{display:block;text-decoration:none}
.pie .cols a:hover{text-decoration:underline}
.pie .bajo{margin-top:50px;display:flex;justify-content:space-between;gap:20px;font-size:13.5px}
.pie .bajo a{text-decoration:none}

/* ─── Páginas interiores (galería, legal, 404) ─── */
.pagina{padding:90px 0 120px}
.pagina h1{font-size:60px;margin-bottom:26px}
.pagina .ent{font-size:19px;color:var(--soft);max-width:44ch;margin-bottom:16px}
.pagina .ctas{margin-top:32px}
.texto{max-width:720px}
.texto h2{font-size:28px;margin:36px 0 12px}
.texto p,.texto li{color:#5A5349;margin-bottom:12px}
.texto ul{padding-left:20px}
.nada{text-align:center}
.nada .ent{margin:0 auto 16px}

/* ─── Tablet ─── */
@media (max-width:1100px){
  .banda h1{font-size:54px}
  .fila{grid-template-columns:130px 1fr 260px;gap:28px}
  .mani .wrap,.carrete .wrap,.gal .wrap,.cont .wrap{gap:50px}
}
@media (max-width:900px){
  .cab{height:72px;padding:0 24px}
  .cab .abre{display:block}
  .cab .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--cal);padding:6px 24px 24px;box-shadow:0 20px 30px -20px rgba(63,58,51,.35)}
  .cab .menu.open{display:flex}
  .cab .menu a:not(.btn){padding:14px 0;font-size:17px}
  .cab .menu .btn{margin:10px 0 0;text-align:center}
  .portada{height:460px}
  .sol-grande{left:58%;width:110px;height:110px;bottom:-55px}
  .banda .wrap,.mani .wrap,.carrete .wrap,.gal .wrap,.cont .wrap,.como .wrap,.bio .wrap{grid-template-columns:1fr}
  .bio .wrap{gap:56px}
  .bio .retrato{max-width:400px}
  .banda .wrap{gap:24px}
  .mani .duo{max-width:640px}
  .como .wrap{gap:10px}
  .pasos{grid-template-columns:1fr 1fr;row-gap:44px}
  .pasos::before{display:none}
  .paso{padding-top:40px}
  .paso .s{top:0}
  .paso::before{content:"";position:absolute;top:16px;left:0;right:0;height:2px;background:var(--monte)}
  .pie .wrap.arriba{flex-direction:column}
}

/* ─── Móvil ─── */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .cab{height:64px;padding:0 20px}
  .cab .marca{font-size:22px}
  .portada{height:400px}
  .portada>img{object-position:33% 50%}
  .sol-grande{width:96px;height:96px;bottom:-48px}
  .banda{padding:36px 0 44px}
  .banda h1{font-size:38px;line-height:1.02;margin-bottom:4px}
  .ctas{flex-direction:column}
  .ctas .btn{text-align:center}
  .mani,.trab{padding:64px 0}
  .mani h2,.ses h2,.trab h2,.como h2,.gal h2{font-size:32px;margin-bottom:18px}
  .mani p,.gal p,.carrete p{font-size:16px}
  .duo{grid-template-columns:1.2fr .8fr;gap:10px;margin-top:10px}
  .duo div:first-child{height:300px}.duo div:last-child{height:220px}
  .ses{padding:0 0 64px}
  .fila{grid-template-columns:1fr;gap:0;padding:0;overflow:hidden;background:var(--cal2);border-radius:12px;margin-bottom:12px}
  .fila .ft{height:220px;border-radius:0}
  .fila>div:nth-child(2){padding:18px 18px 0}
  .fila h3{font-size:29px;margin-bottom:6px}
  .fila>div:nth-child(3){padding:12px 18px 20px;display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px}
  .fila .precio{font-size:30px;margin:0;grid-column:2;grid-row:1}
  .fila .dat{grid-column:1;grid-row:1}
  .fila .hora{grid-column:1/-1;margin-top:8px;font-size:13.5px}
  .carrete{padding:60px 0}
  .carrete h2{font-size:34px;margin-bottom:18px}
  .carrete .fotos{gap:10px}
  .carrete .fotos div{height:230px}.carrete .fotos div:last-child{margin-top:40px;height:190px}
  .etiqueta{font-size:14px;padding:9px 16px}
  .just{flex-wrap:wrap;gap:8px;margin-bottom:8px}
  .just div{height:200px;flex-basis:calc(50% - 4px)!important;flex-grow:0!important}
  .bio{padding:64px 0}
  .bio .wrap{gap:44px}
  .bio .retrato{max-width:none;margin-right:34px}
  .bio .retrato>div{height:440px}
  .sol-bio{width:96px;height:96px;right:-34px;top:-34px}
  .bio h2{font-size:32px;margin-bottom:18px}
  .bio p{font-size:16px}
  .bio p.ent{font-size:21px;margin-bottom:16px}
  .como{padding:10px 0 64px}
  .bio + .como{padding-top:64px}
  .pasos{grid-template-columns:1fr;row-gap:30px;padding-top:24px}
  .gal{padding:64px 0}
  .movil{width:240px;height:480px;border-radius:32px;padding:10px}
  .movil .esc{transform:scale(.5641)}
  .cont{padding:64px 0}
  .cont h2{font-size:34px;margin-bottom:20px}
  .form{grid-template-columns:1fr}
  .form .btn{width:100%;text-align:center}
  .pie .cols{gap:40px}
  .pie .bajo{flex-direction:column;gap:6px}
  .pagina{padding:56px 0 80px}
  .pagina h1{font-size:38px}
}