/* ════════════════════════════════════════════════════════════════════════
   Verde Ikiru · sitio público — estilos con el Manual de Marca v1
   (web, etapa 3 · oct 2026). Lo usan la home, Servicios y Paisajismo.
   Una sola hoja para las tres: así no pueden quedar distintas.

   Reglas del manual que se aplican acá:
   · Color: solo la paleta, con su código. Texto claro sobre verde, verde
     sobre claro, NUNCA texto claro sobre Brote o Arena.
   · Tipografía: Bitter (titulares, SemiBold 600 como máximo — nunca Bold)
     y DM Sans (todo lo demás). Escala web: titular 44 · subtítulo 28 ·
     antetítulo 12 · bajada 18 · texto 16 · precio 18 · letra chica 13.
   · Botón principal: Brote con texto Verde profundo, radio completo, sin
     sombra. El secundario va con borde.
   · Filete Arena de 2 px bajo los títulos.
   · Íconos de línea de 1,5 px, sin relleno, del color del texto.
   · Sin emojis.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --verde:#1F4A33; --profundo:#143223; --brote:#8DBE60; --arena:#D2B579;
  --crema:#F5F1ED; --brote-claro:#E4EDD6;
  --tinta:#23261F; --gris:#696C63; --linea:#DCD7C6; --blanco:#FFFFFF;
  --titular:'Bitter',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--tinta);background:var(--crema)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brote);outline-offset:2px}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 16px}}

/* ── Íconos de línea ── */
.ico{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ── Niveles de texto ── */
.ante{font-family:var(--sans);font-weight:600;font-size:12px;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;color:var(--verde)}
.sobre-verde .ante,.top .ante{color:var(--arena)}
h1,.titular{font-family:var(--titular);font-weight:600;font-size:44px;line-height:1.12;letter-spacing:-.015em;color:var(--verde)}
h2,.subtitulo{font-family:var(--titular);font-weight:500;font-size:28px;line-height:1.25;letter-spacing:-.01em;color:var(--verde)}
.filete{display:block;width:56px;height:2px;background:var(--arena);margin:14px 0 0}
.baj{font-size:18px;line-height:1.5;color:var(--gris)}
.chica{font-size:13px;line-height:1.45;color:var(--gris)}
.sobre-verde h1,.sobre-verde h2{color:var(--crema)}
.sobre-verde .baj{color:var(--brote-claro)}
@media(max-width:560px){h1,.titular{font-size:32px}h2,.subtitulo{font-size:24px}.baj{font-size:17px}}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 24px;border-radius:999px;border:1.5px solid transparent;font-family:var(--sans);font-weight:700;font-size:16px;line-height:1;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn .ico{width:20px;height:20px}
.btn-primario{background:var(--brote);color:var(--profundo)}
.btn-primario:hover{background:#9BC871}
.btn-borde{border-color:var(--verde);color:var(--verde);background:transparent}
.btn-borde:hover{background:var(--brote-claro)}
.sobre-verde .btn-borde{border-color:rgba(245,241,237,.6);color:var(--crema)}
.sobre-verde .btn-borde:hover{background:rgba(245,241,237,.1)}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--verde);text-decoration:none;padding:6px 0}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.link .ico,.serv-cta .ico,.migas .ico{width:18px;height:18px}
/* En el celular, todo lo que se toca mide 44 px como minimo */
@media(max-width:760px){.link,.migas,.contactos a,.pie-nav a{min-height:44px;display:inline-flex;align-items:center}}
@media(max-width:560px){.acciones .btn{width:100%}}

/* ── Encabezado de marca (siempre a la izquierda, Verde profundo) ── */
.top{background:var(--profundo);color:var(--crema)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.lockup{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0}
.lockup svg{width:46px;height:46px;flex-shrink:0}
.lockup .nom{font-family:var(--titular);font-weight:600;font-size:22px;line-height:1.1;letter-spacing:-.015em;color:var(--crema);white-space:nowrap}
.lockup .nom b{font-weight:600;color:var(--arena)}
.lockup .baj-marca{display:block;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--arena);margin-top:3px;white-space:nowrap}
@media(max-width:560px){.lockup svg{width:40px;height:40px}.lockup .nom{font-size:20px}.lockup .baj-marca{display:none}}

/* Acceso de clientes al portal (botón secundario, con borde) */
.btn-portal{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 16px;border:1.5px solid rgba(245,241,237,.55);border-radius:999px;color:var(--crema);text-decoration:none;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;flex-shrink:0}
.btn-portal:hover{background:rgba(245,241,237,.1)}
.btn-portal .ico{width:18px;height:18px}
@media(max-width:560px){.btn-portal{padding:8px 14px}.btn-portal .bp-l{display:none}}

/* ── Portada (sigue el Verde profundo del encabezado) ── */
.hero{background:var(--profundo);color:var(--crema);padding:56px 0 64px;border-top:1px solid rgba(210,181,121,.25)}
.hero h1{max-width:760px;margin-top:14px}
.hero .baj{max-width:640px;margin-top:20px}
.hero .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-chico{padding:34px 0 42px}
.migas{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--brote-claro);text-decoration:none;margin-bottom:18px;padding:4px 0}
.migas:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:560px){.hero{padding:40px 0 46px}.hero-chico{padding:26px 0 32px}}

/* ── Bloques ── */
.bloque{padding:64px 0}
.bloque-blanco{background:var(--blanco)}
.cabeza{margin-bottom:32px}
.cabeza h2{margin-top:10px}
.cabeza .baj{margin-top:16px;max-width:680px}
@media(max-width:560px){.bloque{padding:46px 0}.cabeza{margin-bottom:24px}}

/* Tarjetas de la home */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.tarjetas{grid-template-columns:1fr}}
.sec{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:28px 26px 22px;text-decoration:none;transition:border-color .15s}
.sec:hover{border-color:var(--brote)}
.sec .icono{width:52px;height:52px;border-radius:50%;background:var(--brote-claro);color:var(--verde);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.sec .icono .ico{width:26px;height:26px}
/* El antetítulo de Servicios ocupa dos renglones: los tres títulos quedan a la misma altura */
@media(min-width:901px){.sec .ante{min-height:29px}}
.sec h3{font-family:var(--titular);font-weight:500;font-size:26px;line-height:1.25;color:var(--verde);margin-top:10px}
.sec p{color:var(--gris);margin-top:16px;flex:1}
.sec .link{margin-top:16px}

/* Cómo funciona */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:paso}
@media(max-width:900px){.pasos{grid-template-columns:1fr;gap:22px}}
.paso{display:flex;gap:16px;align-items:flex-start}
.paso .icono{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--verde);color:var(--verde);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.paso h3{font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.3;color:var(--tinta)}
.paso p{color:var(--gris);margin-top:4px}

/* Zona */
.barrios{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none}
.barrios li{background:var(--brote-claro);color:var(--verde);font-weight:500;font-size:15px;border-radius:999px;padding:8px 16px}

/* ── Banda de contacto (Verde Ikiru) ── */
.banda{background:var(--verde);color:var(--crema);padding:56px 0}
.banda .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.banda h2{max-width:560px}
.banda .baj{margin-top:12px}
@media(max-width:560px){.banda{padding:44px 0}.banda .btn{width:100%}}

/* ── Pie de contacto (orden fijo: WhatsApp, Instagram, web) ── */
footer{background:var(--profundo);color:var(--brote-claro);padding:44px 0 40px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}
.contactos{list-style:none;display:flex;flex-direction:column;gap:6px}
.contactos a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--crema);padding:4px 0}
.contactos a:hover{text-decoration:underline;text-underline-offset:4px}
.contactos .ico{width:20px;height:20px;color:var(--arena)}
.pie-nav{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.pie-nav a{color:var(--brote-claro);text-decoration:none;font-weight:500;padding:4px 0;display:inline-block}
.pie-nav a:hover{color:var(--crema);text-decoration:underline;text-underline-offset:4px}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(210,181,121,.3);padding-top:18px;font-size:13px;line-height:1.45;color:rgba(228,237,214,.75)}

/* ── Servicios ── */
.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.servicios{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.servicios{grid-template-columns:1fr}}
.serv{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.serv .media{aspect-ratio:16/10;background:var(--brote-claro);overflow:hidden}
.serv .media img{width:100%;height:100%;object-fit:cover}
.serv .body{display:flex;flex-direction:column;flex:1;padding:24px 24px 18px}
.serv h3{font-family:var(--titular);font-weight:500;font-size:24px;line-height:1.25;color:var(--verde)}
.serv h3::after{content:"";display:block;width:56px;height:2px;background:var(--arena);margin-top:12px}
.serv p{color:var(--gris);margin-top:14px}
.serv .serv-cta{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--verde);text-decoration:none;min-height:44px}
.serv .serv-cta:hover{text-decoration:underline;text-underline-offset:4px}
.serv .serv-cta + .serv-cta{padding-top:0;margin-top:0}
.precios-vivo{margin-top:16px}
.precios-vivo .cargando{font-size:13px;color:var(--gris)}
.precios{list-style:none;border-top:1px solid var(--linea)}
.precios li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:15px;line-height:1.35;color:var(--tinta)}
.precios li .nom{flex:1;min-width:0}
/* El precio va en chip Brote claro, siempre a la derecha */
.precios li b{font-weight:700;font-size:16px;color:var(--verde);background:var(--brote-claro);border-radius:999px;padding:5px 12px;white-space:nowrap}
.precios li b.consultar{font-weight:600;font-size:13px;color:var(--gris);background:transparent;border:1px solid var(--linea)}
.precio-nota{font-size:13px;line-height:1.45;color:var(--gris);margin-top:10px}

/* ── Paisajismo ── */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.intro{grid-template-columns:1fr;gap:28px}}
.lista{list-style:none}
.lista li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--linea);color:var(--tinta)}
.lista li:first-child{border-top:1px solid var(--linea)}
.lista li .ico{width:20px;height:20px;color:var(--verde);margin-top:2px}
.proy{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:32px}
@media(max-width:560px){.proy{padding:22px 18px}}
.proy-in{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;margin-top:28px;align-items:start}
@media(max-width:860px){.proy-in{grid-template-columns:1fr;gap:26px}}
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.galeria a{display:block;border-radius:var(--r);overflow:hidden;background:var(--brote-claro)}
.galeria img{width:100%;height:100%;object-fit:cover}
.galeria .alta{grid-row:span 2}
.galeria .alta img{aspect-ratio:900/1305}
.galeria .baja img{aspect-ratio:4/3}
@media(max-width:520px){.galeria{grid-template-columns:1fr}.galeria .alta{grid-row:auto}}
.proy h3{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--verde);margin-bottom:12px}

/* ════════════════════════════════════════════════════════════════════════
   HOME (v13.30) — pedido del dueño: la home como era antes, con la barra de
   portada del modelo del catálogo (tarjeta verde con filetes Arena arriba y
   abajo, sello a la izquierda, nombre al centro) y los dos botones a la
   derecha, uno arriba del otro. Colores, letras y logo del manual.
   ════════════════════════════════════════════════════════════════════════ */
.home main{padding-bottom:8px}
.portada{position:relative;margin:18px 0 0;min-height:236px;border-radius:18px;overflow:hidden;background:var(--verde);display:flex;align-items:center;gap:36px;padding:40px 44px}
.portada .halo{position:absolute;inset:0;background:radial-gradient(140% 180% at 100% 50%,rgba(141,190,96,.14),rgba(141,190,96,0) 55%);pointer-events:none}
.portada .fil{position:absolute;left:30px;right:30px;height:1px;background:linear-gradient(90deg,rgba(210,181,121,0),var(--arena) 50%,rgba(210,181,121,0));pointer-events:none}
.portada .fil.a{top:18px}
.portada .fil.b{bottom:18px}
/* El sello va solo, sin nombre adentro (manual): el nombre está al lado */
.portada .sello{position:relative;width:118px;height:118px;flex-shrink:0;border-radius:50%;background:var(--profundo);display:flex;align-items:center;justify-content:center}
.portada .sello svg{width:100%;height:100%}
.portada .ptexto{position:relative;flex:1;text-align:center;min-width:0}
.portada .pnom{font-family:var(--titular);font-weight:600;font-size:40px;line-height:1.12;letter-spacing:-.015em;color:var(--crema)}
.portada .pnom b{font-weight:600;color:var(--arena)}
.portada .pbaj{font-size:18px;line-height:1.45;color:var(--brote-claro);margin-top:10px;text-wrap:balance}
.portada .ptag{font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--arena);margin-top:14px}
.portada .pbotones{position:relative;display:flex;flex-direction:column;gap:8px;width:184px;flex-shrink:0;margin-top:58px}
/* Botones de la portada mas chicos que los del resto (pedido del dueño) */
.portada .pbotones .btn{width:100%;min-height:40px;padding:8px 16px;font-size:14px;gap:7px}
.portada .pbotones .btn .ico{width:17px;height:17px}
.portada .btn-portal{position:absolute;top:32px;right:44px;z-index:3;min-height:38px;width:184px;justify-content:center;font-size:13px}
/* El sello de las paginas internas lleva al inicio */
a.sello{text-decoration:none}
.portada .pvolver{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;color:var(--brote-claro);text-decoration:none}
.portada .pvolver:hover{text-decoration:underline;text-underline-offset:4px}
.portada .pvolver .ico{width:16px;height:16px}
@media(max-width:900px){
  .portada{flex-direction:column;text-align:center;gap:0;padding:66px 22px 30px;margin-top:12px}
  .portada .fil{left:22px;right:22px}
  .portada .fil.a{top:14px}.portada .fil.b{bottom:14px}
  .portada .sello{width:88px;height:88px;margin-bottom:14px}
  .portada .pnom{font-size:30px}
  .portada .pbaj{font-size:16px}
  .portada .ptag{font-size:11px;letter-spacing:.2em}
  .portada .pbotones{width:100%;max-width:300px;margin-top:20px}
  .portada .pbotones .btn{min-height:44px}
  .portada .pvolver{min-height:44px;margin-top:4px}
  .portada .btn-portal{top:12px;right:12px;min-height:44px;width:auto}
}

/* Tarjetas con banda ilustrada (las de antes, con la paleta) */
.secciones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px 0 0}
@media(max-width:900px){.secciones{grid-template-columns:repeat(2,1fr);margin-top:24px}}
@media(max-width:640px){.secciones{grid-template-columns:1fr}}
.home .sec{padding:0;overflow:hidden}
.home .sec .cuerpo{display:flex;flex-direction:column;flex:1;padding:22px 24px 20px}
.home .sec h2{font-family:var(--titular);font-weight:600;font-size:25px;line-height:1.2;color:var(--verde)}
.home .sec h2::after{content:"";display:block;width:56px;height:2px;background:var(--arena);margin-top:12px}
.home .sec p{margin-top:14px}
.cap{position:relative;height:96px;background:var(--verde);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-bottom:2px solid var(--arena)}
.cap::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(58% 108% at 50% 50%,rgba(20,50,35,.7),rgba(20,50,35,0) 74%)}
.cap-art{position:absolute;inset:0;width:100%;height:100%;color:var(--brote-claro);opacity:.32;transition:opacity .18s}
.home .sec:hover .cap-art{opacity:.5}
.cap-lbl{position:relative;z-index:2;font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--crema);padding:0 12px;text-align:center;line-height:1.35}

/* Contacto (como antes, con la paleta) */
.zona{background:var(--brote-claro);border-radius:var(--r);padding:28px 24px;margin:32px 0 0;text-align:center}
.zona h3{font-family:var(--titular);font-weight:600;font-size:24px;color:var(--verde)}
.zona p{color:var(--gris);max-width:640px;margin:8px auto 0}
.btn-verde{background:var(--verde);color:var(--crema);margin-top:18px}
.btn-verde:hover{background:var(--profundo)}

/* Pie de la home: claro y centrado, como antes */
.pie-claro{background:transparent;color:var(--gris);padding:40px 0 44px;margin-top:36px;border-top:1px solid var(--linea);text-align:center}
.pie-claro .wrap{display:block}
.pie-claro .marca{font-weight:600;color:var(--tinta)}
.pie-claro .contactos{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin-top:10px}
.pie-claro .contactos a{color:var(--verde);font-weight:600}
.pie-claro .contactos .ico{color:var(--verde)}
.pie-claro .legal{border-top:0;padding-top:10px;color:var(--gris)}