:root{
 --green:#004c3b;--green2:#003b2e;--cream:#f8f2e6;--paper:#fffdf7;
 --purple:#8538a7;--lime:#8bc34a;--text:#073e34;--muted:#40564e;
 --head:76px;--foot:58px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--text)}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 36px));margin:auto}

/* Creo un menú idéntico en todas las páginas. */
header{height:var(--head);background:var(--green2);color:#fff;position:relative;z-index:10}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:800;font-size:1.05rem}.brand small{display:block;font-size:.66rem;font-weight:400;opacity:.82}
nav{display:flex;align-items:center;gap:18px}
nav a{font-size:.77rem;padding:8px 0;border-bottom:2px solid transparent}
nav a:hover,nav a.active{color:#c8ef8d;border-color:#c8ef8d}

/*
 Creo las páginas principales para que en escritorio entren aproximadamente en una pantalla.
 No obligo a la fotografía a crecer más que el alto disponible.
*/
.screen{
 min-height:calc(100vh - var(--head) - var(--foot));
 display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
 background:var(--cream);overflow:hidden
}
.media{min-height:0;background:#173e32;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media img{width:100%;height:100%;max-height:calc(100vh - var(--head) - var(--foot));object-fit:cover;object-position:center}
.copy{padding:clamp(26px,4vw,58px);display:flex;flex-direction:column;justify-content:center;overflow:auto}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:2px;color:var(--purple);font-weight:900}
h1{font-family:Georgia,serif;font-size:clamp(2.7rem,4.7vw,4.9rem);line-height:.95;margin:8px 0 12px}
h2{margin:0 0 14px;font-size:1.22rem}p{line-height:1.5;color:var(--muted)}
.quote{font-family:Georgia,serif;font-style:italic;font-size:1.45rem;margin-top:20px}
.btn{display:inline-block;border:0;border-radius:10px;padding:12px 18px;background:var(--purple);color:white;font-weight:800;cursor:pointer}
.btn.wa{background:#168c49}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/*
 INICIO:
 No uso una fotografía ni una imagen generada como fondo.
 Construyo toda la riqueza visual con CSS, texto e iconos SVG vectoriales.
*/
.home{min-height:calc(100vh - var(--head) - var(--foot));position:relative;overflow:hidden;background:
 radial-gradient(circle at 17% 78%,rgba(139,195,74,.14),transparent 20%),
 radial-gradient(circle at 84% 22%,rgba(133,56,167,.08),transparent 22%),
 linear-gradient(90deg,#f3ead9,#fffdf7 35%,#fffdf7 68%,#f2eadc)}
.home-content{min-height:inherit;display:grid;place-items:center;text-align:center;padding:34px 0;position:relative;z-index:2}
.home-inner{max-width:820px}
.home h1{font-size:clamp(3.5rem,7vw,6.7rem);letter-spacing:-3px}
.home h1 span{display:block;color:var(--purple)}
.home .lead{font-size:1.15rem;max-width:650px;margin:0 auto}
.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:30px auto;max-width:760px}
.feature svg{width:48px;height:48px;margin:auto;fill:var(--green)}
.feature b{display:block;margin-top:8px;font-size:.92rem}
.script{font:italic 1.7rem Georgia,serif;margin:18px auto;color:var(--green)}
.leaf{position:absolute;width:190px;height:310px;opacity:.88}
.leaf.left{left:-35px;top:15px;transform:rotate(-18deg)}
.leaf.right{right:-30px;bottom:0;transform:rotate(165deg)}
.leaf i{position:absolute;width:70px;height:115px;background:linear-gradient(135deg,#275f39,#75a753);border-radius:100% 0 100% 0;transform-origin:bottom right}
.leaf i:nth-child(1){left:35px;top:10px}.leaf i:nth-child(2){left:85px;top:80px;transform:rotate(48deg)}
.leaf i:nth-child(3){left:5px;top:120px;transform:rotate(-35deg)}.leaf i:nth-child(4){left:70px;top:185px;transform:rotate(55deg)}
.home-badges{position:absolute;left:20px;bottom:18px;text-align:left;font-size:.72rem;color:var(--green)}
.home-badges b{display:block;margin:7px 0}

/* Tarjetas compactas para no inflar la altura de las páginas. */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.card{background:#fff;border-radius:10px;padding:12px 14px;box-shadow:0 4px 16px #173e3212;border-left:4px solid var(--purple)}
.card b{display:block;margin-bottom:3px}.card small{color:var(--muted)}

/* Galería: dejo únicamente cuadros blancos para trabajos reales. */
.gallery-page{padding:32px 0 42px}
.gallery-intro{display:grid;grid-template-columns:36% 64%;gap:28px;align-items:center;margin-bottom:28px}
.gallery-intro img{width:100%;height:270px;object-fit:cover;border-radius:14px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery-box{aspect-ratio:1;background:#fff;border:1px solid #d8d0c4;border-radius:11px;box-shadow:0 4px 16px #173e3210;overflow:hidden}
.gallery-box img{width:100%;height:100%;object-fit:cover}

/* Reseñas */
.reviews{display:grid;gap:10px;margin-top:14px}.review{background:white;padding:13px 15px;border-radius:10px}
.stars{color:#e7a21a;letter-spacing:2px}.review p{margin:5px 0}.review-form{margin-top:15px}

/* Formularios */
form{display:grid;gap:9px}label{font-size:.78rem;font-weight:800}
input,textarea{width:100%;border:1px solid #c9c0b4;border-radius:8px;background:#fff;padding:10px;font:inherit}
textarea{min-height:82px;resize:vertical}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.full{grid-column:1/-1}
.star-picker{display:flex;gap:3px}.star-picker button{border:0;background:none;font-size:1.7rem;color:#bbb;cursor:pointer}.star-picker button.on{color:#e7a21a}

/* Contacto */
.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}
.detail{background:white;border-radius:9px;padding:10px;font-size:.84rem}
.map{display:block;max-width:310px;margin-top:12px;border-radius:10px;overflow:hidden;border:1px solid #d6ccbf}
.map img{width:100%;height:150px;object-fit:cover}

/* Creo el mapa como SVG local; verlo no necesita Internet. */
footer{height:var(--foot);background:var(--green2);color:#fff}
.foot{height:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.72rem}
.foot-actions{display:flex;gap:8px}.foot .btn{padding:8px 12px;font-size:.72rem}

/* En tablet y teléfono dejo de forzar una sola pantalla y apilo naturalmente. */
@media(max-width:860px){
 :root{--head:auto;--foot:auto}
 header{height:auto}.nav{padding:12px 0;flex-direction:column}nav{justify-content:center;flex-wrap:wrap;gap:12px}
 .screen{grid-template-columns:1fr;overflow:visible}.media{height:min(58vh,560px)}.media img{max-height:none}
 .copy{overflow:visible}.gallery-intro{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)}
 footer{height:auto}.foot{padding:15px 0;flex-direction:column}.leaf{opacity:.35}
}
@media(max-width:520px){
 .feature-row,.cards,.gallery-grid,.contact-details,.form2{grid-template-columns:1fr}
 .home h1{letter-spacing:-1px}.gallery-intro img{height:220px}.full{grid-column:auto}
}

/* V10: incorporo el logo real sin aumentar innecesariamente la cabecera. */
.brand{display:flex;align-items:center;gap:10px}
.brand span{display:block}
.site-logo{width:56px;height:56px;flex:0 0 56px;border-radius:50%;object-fit:cover;border:2px solid rgba(199,232,113,.65)}

/* Adapto Galería al mismo esquema: imagen izquierda y contenido derecha. */
.gallery-screen{grid-template-columns:minmax(0,43%) minmax(0,57%)}
.gallery-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.gallery-copy{padding:clamp(18px,2.6vw,38px)}
.gallery-copy h1{font-size:clamp(2rem,3.5vw,3.7rem);margin-bottom:8px}
.gallery-copy>p{margin:0 0 10px}
.gallery-grid-side{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:8px}
.gallery-grid-side .gallery-box{aspect-ratio:1;background:#fff;border:1.5px solid rgba(133,56,167,.55);min-width:0}
.gallery-quote{text-align:center;color:var(--purple);font-size:1.15rem;margin-top:11px}
@media(max-width:860px){
 .site-logo{width:52px;height:52px;flex-basis:52px}
 .gallery-screen{grid-template-columns:1fr}
 .gallery-grid-side{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){.gallery-grid-side{grid-template-columns:1fr}}