/* ===========================================================================
   Mamá Oceánica — Landing (concepto OCÉANO)
   Las variables de color se pueden sobreescribir desde functions.php (CONFIG).
   =========================================================================== */

.mo{
  --abismo:#15323f; --profundo:#1b3f4e; --marea:#1f5266; --mar:#3f8ea3;
  --turquesa:#74b7c8; --luz:#a3d2dd; --bioluz:#bfe6ea; --espuma:#f1f7f8;
  --perla:#fbf5ea; --arena:#f4e7d2; --tinta:#16313c; --oro:#ecd9b4; --oro2:#a8854b;
  --serif:'Cormorant Garamond',Georgia,serif; --script:'Pinyon Script',cursive;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --maxw:1140px; --r:20px;
}
.mo,.mo *,.mo *::before,.mo *::after{box-sizing:border-box;margin:0;padding:0}
.mo{font-family:var(--sans);color:var(--tinta);line-height:1.7;font-size:18px;-webkit-font-smoothing:antialiased;background:var(--perla);overflow-x:hidden}
.mo img{max-width:100%;height:auto;display:block}
.mo a{color:inherit;text-decoration:none}
.mo h1,.mo h2,.mo h3{font-family:var(--serif);line-height:1.08;font-weight:600;letter-spacing:.4px;color:var(--tinta)}
.mo h1{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:700}
.mo h2{font-size:clamp(2rem,4.4vw,3.3rem)}
.mo h3{font-size:1.45rem;letter-spacing:.2px}
.mo p{margin-bottom:1rem}
.mo em{font-style:italic;color:var(--mar)}
.mo .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.mo .narrow{max-width:780px;margin-inline:auto}
.mo .center{text-align:center}
.mo .eyebrow{font-family:var(--sans);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--mar);margin-bottom:18px}
.mo .script{font-family:var(--script);color:var(--oro);font-weight:400;font-style:normal}
.mo section{position:relative;padding:104px 0}
.mo .lead{font-size:1.22rem;color:#3a5560}

.mo a:focus-visible,.mo button:focus-visible,.mo input:focus-visible,.mo select:focus-visible,.mo summary:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px;border-radius:8px}
.mo .skip{position:absolute;left:-9999px;top:0;background:var(--abismo);color:#fff;padding:12px 18px;z-index:60;border-radius:0 0 10px 0}
.mo .skip:focus{left:0}

.mo .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:1.02rem;padding:17px 34px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s;text-align:center;line-height:1.1}
.mo .btn-gold{background:linear-gradient(135deg,var(--oro),var(--oro2));color:var(--tinta);box-shadow:0 14px 30px rgba(168,133,75,.30)}
.mo .btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(168,133,75,.40)}
.mo .btn-light{background:var(--espuma);color:var(--profundo)}
.mo .btn-light:hover{transform:translateY(-3px)}
.mo .btn-ghost{background:transparent;color:var(--espuma);border:1.5px solid rgba(255,255,255,.4)}
.mo .btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.mo .btn-deep{background:var(--marea);color:#fff}
.mo .btn-deep:hover{background:var(--profundo);transform:translateY(-3px)}
.mo .cta-note{font-size:.92rem;color:var(--mar);margin-top:14px}

.mo .deep{background:
   radial-gradient(120% 80% at 50% -10%, rgba(116,183,200,.22), transparent 60%),
   radial-gradient(80% 60% at 80% 120%, rgba(191,230,234,.10), transparent 55%),
   linear-gradient(180deg,var(--profundo),var(--abismo));color:var(--espuma)}
.mo .deep h1,.mo .deep h2,.mo .deep h3{color:#fff}
.mo .deep .lead{color:#bcdbe2}
.mo .deep .eyebrow{color:var(--luz)}
.mo .mid{background:linear-gradient(180deg,#eef7f9,#e3f0f3)}

.mo .wave{line-height:0;display:block}
.mo .wave svg{display:block;width:100%;height:70px}

.mo .hero{position:relative;overflow:hidden;padding:120px 0 130px}
/* Hero con foto de fondo (textura de mar en calma) + filtro azul de marca.
   Imagen sin horizonte: encuadre centrado; el degradado funde los reflejos
   cálidos en azul y asienta el texto en la parte baja. */
.mo .hero.has-photo{background:
   linear-gradient(180deg, rgba(31,82,102,.52) 0%, rgba(27,63,78,.66) 50%, rgba(21,50,63,.90) 100%),
   var(--hero-img) center center / cover no-repeat;
   background-color:var(--abismo)}
.mo .hero::before{content:"";position:absolute;inset:0;background:
   conic-gradient(from 200deg at 50% -20%, transparent 0deg, rgba(163,210,221,.12) 18deg, transparent 36deg, rgba(191,230,234,.09) 60deg, transparent 84deg);
   opacity:.9;animation:moShimmer 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes moShimmer{from{transform:translateY(-2%) scale(1)}to{transform:translateY(2%) scale(1.05)}}
.mo .hero .wrap{position:relative;z-index:2}
.mo .hero h1{max-width:16ch}
.mo .hero .sub{font-size:1.28rem;max-width:56ch;margin:26px 0 36px;color:#cbe5ea}
.mo .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.mo .trust{display:flex;gap:30px;flex-wrap:wrap;margin-top:42px;font-size:.95rem;color:var(--luz);font-weight:500}
.mo .trust span{display:inline-flex;align-items:center;gap:9px}

.mo .grid{display:grid;gap:24px}
.mo .g2{grid-template-columns:repeat(2,1fr)}
.mo .g3{grid-template-columns:repeat(3,1fr)}
.mo .g4{grid-template-columns:repeat(4,1fr)}
.mo .card{background:#fff;border:1px solid rgba(12,37,48,.08);border-radius:var(--r);padding:34px;box-shadow:0 10px 30px rgba(11,38,48,.06)}
.mo .card h3{margin-bottom:10px}
.mo .icon{width:56px;height:56px;margin-bottom:18px;color:var(--mar)}
.mo .ico{width:56px;height:56px;margin-bottom:18px;color:var(--mar);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mo .kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oro2);font-weight:700;margin-bottom:10px}

.mo .pillar{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:32px}
.mo .pillar .icon,.mo .pillar .ico{color:var(--luz)}
.mo .pillar h3{color:#fff}
.mo .pillar p{color:#bcdbe2;margin:0}

.mo .vs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px}
.mo .vs .col{border-radius:var(--r);padding:32px}
.mo .vs .old{background:#eef1f0;border:1px solid rgba(12,37,48,.08)}
.mo .vs .new{background:linear-gradient(180deg,var(--marea),var(--profundo));color:#eaf6f8;box-shadow:0 16px 40px rgba(11,38,48,.22)}
.mo .vs h3{margin-bottom:16px}
.mo .vs .new h3{color:#fff}
.mo .vs ul{list-style:none}
.mo .vs li{padding:11px 0 11px 32px;position:relative;border-bottom:1px solid rgba(12,37,48,.08)}
.mo .vs .new li{border-color:rgba(255,255,255,.14)}
.mo .vs .old li::before{content:"–";position:absolute;left:0;color:#9aa7a4;font-weight:700}
.mo .vs .new li::before{content:"✓";position:absolute;left:0;color:var(--bioluz);font-weight:700}

.mo .fit{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mo .fit ul{list-style:none}
.mo .fit li{padding:11px 0 11px 34px;position:relative;border-bottom:1px solid rgba(12,37,48,.08)}
.mo .fit li::before{position:absolute;left:0;top:10px;font-weight:700}
.mo .fit .yes li::before{content:"✓";color:var(--mar)}
.mo .fit .no li::before{content:"–";color:#b07f5a}

.mo .rev-head{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.mo .gbadge{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(12,37,48,.1);border-radius:999px;padding:10px 18px;box-shadow:0 6px 18px rgba(11,38,48,.06);font-weight:600}
.mo .gbadge .glogo{width:20px;height:20px}
.mo .gbadge .score{color:var(--oro2);font-weight:700}
.mo .stars,.mo .mo-stars{display:inline-flex;gap:2px;vertical-align:middle}
.mo .star,.mo .mo-star{width:18px;height:18px;fill:#d8dcd9}
.mo .star.on,.mo .mo-star.on{fill:#f5b301}
/* Reseñas: la última fila incompleta (p. ej. 2 de 5) queda centrada. */
.mo .reviews-grid{display:flex;flex-wrap:wrap;justify-content:center}
.mo .reviews-grid .review{flex:1 1 calc(33.333% - 16px);max-width:calc(33.333% - 16px)}
.mo .review{background:#fff;border:1px solid rgba(12,37,48,.08);border-radius:var(--r);padding:28px;box-shadow:0 10px 26px rgba(11,38,48,.05);display:flex;flex-direction:column;gap:12px}
.mo .review .top{display:flex;align-items:center;gap:12px}
.mo .review .avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--turquesa),var(--marea));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--sans);overflow:hidden}
.mo .review .name{font-weight:600;display:block}
.mo .review .when{font-size:.82rem;color:#7f8d8a;display:block}
.mo .review p{font-style:italic;color:#33505a;margin:0}

.mo .founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center}
.mo .founder .photo{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--mar),var(--abismo));border-radius:24px;min-height:420px;display:flex;align-items:flex-end;justify-content:center;color:#cfeaee;padding:22px;text-align:center;font-size:.88rem}
.mo .founder .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:24px}
.mo .sign{font-family:var(--script);font-size:2.2rem;color:var(--oro2);margin-top:6px}

.mo .stack{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.mo .guarantee{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:30px;margin-top:24px}
.mo .price-frame{max-width:64ch;margin:30px auto 0;text-align:center;color:#cbe5ea}

.mo .capture{background:
   radial-gradient(120% 90% at 50% -20%, rgba(191,230,234,.18), transparent 60%),
   linear-gradient(160deg,var(--marea),var(--abismo));
   color:#fff;border-radius:28px;padding:60px;text-align:center;box-shadow:0 30px 70px rgba(21,50,63,.35)}
.mo .capture h2{color:#fff}
.mo .capture p{color:#cbe5ea}
.mo form{display:grid;gap:14px;max-width:480px;margin:28px auto 0;text-align:left}
.mo label{font-size:.9rem;font-weight:600;color:#eaf6f8}
.mo input,.mo select{width:100%;padding:15px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.97);color:var(--tinta);font-size:1rem;font-family:var(--sans)}
.mo .form-msg{margin-top:14px;font-weight:600;min-height:1.2em}

.mo details{background:#fff;border:1px solid rgba(12,37,48,.1);border-radius:14px;margin-bottom:12px;overflow:hidden}
.mo summary{cursor:pointer;padding:22px 26px;font-weight:600;font-size:1.1rem;font-family:var(--sans);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.mo summary::-webkit-details-marker{display:none}
.mo summary::after{content:"+";font-size:1.6rem;color:var(--mar);transition:transform .2s}
.mo details[open] summary::after{transform:rotate(45deg)}
.mo details .answer{padding:0 26px 24px;color:#3a5560}

.mo .sticky{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;background:rgba(21,50,63,.93);backdrop-filter:blur(8px);padding:12px 16px;box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.mo .sticky .btn{width:100%;justify-content:center}

.mo .mo-foot{background:var(--abismo);color:#9fc0c8;padding:54px 0;text-align:center;font-size:.92rem}
.mo .mo-foot a{color:#eaf6f8;text-decoration:underline}
.mo .mo-foot .brand{font-family:var(--serif);font-size:1.8rem;color:#fff;margin-bottom:10px}

@media(max-width:900px){
  .mo .g4{grid-template-columns:repeat(2,1fr)}
  .mo .g3{grid-template-columns:1fr}
  .mo .reviews-grid .review{flex-basis:100%;max-width:100%}
  .mo .g2,.mo .vs,.mo .fit,.mo .founder,.mo .stack{grid-template-columns:1fr}
  .mo section{padding:74px 0}
  .mo .hero{padding:96px 0 100px}
  .mo .capture{padding:38px 22px}
  .mo .sticky{display:block}
}
@media(max-width:520px){
  .mo .g4{grid-template-columns:1fr}
  .mo .hero-ctas .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .mo *{transition:none!important;animation:none!important}
}