/* ============================================================
   LIPOSSER · EN — hoja ADITIVA del sitio en inglés.
   Se carga DESPUÉS de /liposser/sitio/assets/liposser.css y no
   redefine nada suyo: solo agrega piezas que el español todavía no
   necesita.
     · el combo de lada internacional del formulario (el inglés pide
       país + número, el español no)
     · las piezas "cine" que pidió Pablo el 5-ago: bandas de foto a
       sangre, mosaicos y secciones con foto de fondo, para que no
       queden huecos blancos muertos entre bloques
   Vive aquí y no en la hoja compartida porque esa es de la ficha del
   sitio en español. Si alguna de estas piezas se adopta también en
   español, súbanla a la hoja compartida y bórrenla de aquí.
   Todo mobile-first: la clase base es la del teléfono.
   ============================================================ */

/* ---------- 0 · celdas de grid que no se dejan encoger ----------
   Una celda de grid vale por defecto min-width:auto, o sea el ancho
   mínimo de su contenido. Si adentro va una tabla con min-width:560px
   —las de /contacto y /precios— la columna se estira a 560 y el
   teléfono acaba con scroll horizontal aunque la tabla ya tenga su
   propio .tabla-env. Esto lo pasa por alto y deja que la celda se
   encoja; la tabla sigue haciendo scroll dentro de su envoltura.
   OJO ficha del sitio: el español tiene el mismo patrón y muy
   probablemente el mismo desborde. */
.grid > *{ min-width:0; }

/* ---------- 1 · teléfono con lada internacional ---------- */
/* En teléfono la columna del país va más ancha y con letra un punto menor:
   con 34% y 15px el cerrado mostraba "+1 · US / Ca" cortado a media palabra. */
.tel-combo{ display:grid; grid-template-columns:minmax(132px,43%) 1fr; gap:8px; }
@media (min-width:520px){ .tel-combo{ grid-template-columns:minmax(112px,34%) 1fr; } }
.tel-combo select{
  width:100%; min-height:52px; padding:12px 10px; border-radius:var(--r-s);
  border:1.5px solid rgba(20,26,35,.16); background:#fff; color:var(--ink);
  /* 16px como en la hoja compartida: por debajo, iOS hace zoom al enfocar.
     El cerrado corta las ladas de nombre largo, pero el desplegable de
     teléfono se abre a pantalla completa y ahí sí se lee entero. */
  font:inherit; font-size:16px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E7785' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:30px;
}
.tel-combo select:focus-visible,.tel-combo input:focus-visible{ outline:2px solid var(--ambar); outline-offset:1px; }
.campo.malo .tel-combo select,.campo.malo .tel-combo input{ border-color:var(--rojo); }

/* ---------- 2 · banda de foto a sangre ----------
   Una imagen ancha que corta la página en dos y la vuelve cine. Nunca
   lleva texto de información crítica encima: el rótulo es decorativo. */
.banda-foto{ position:relative; overflow:hidden; background:var(--ink); }
.banda-foto img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; }
@media (min-width:760px){ .banda-foto img{ aspect-ratio:21/7; } }
.banda-foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,26,35,.34) 0%,rgba(20,26,35,.06) 45%,rgba(20,26,35,.62) 100%);
  pointer-events:none;
}
.banda-foto .banda-txt{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px; color:#fff;
}
@media (min-width:768px){ .banda-foto .banda-txt{ padding:34px; } }
.banda-foto .banda-txt p{ margin:0; max-width:46ch; font-size:14px; color:rgba(255,255,255,.82); line-height:1.55; }
.banda-foto .banda-txt .rotulo{ color:var(--ambar-lt); }

/* ---------- 3 · sección con foto de fondo ----------
   Para los bloques que en crudo quedaban como un muro de texto. */
.sec-foto{ position:relative; overflow:hidden; background:var(--ink); color:var(--crema); }
.sec-foto > .sec-foto-media{ position:absolute; inset:0; }
.sec-foto > .sec-foto-media img{ width:100%; height:100%; object-fit:cover; opacity:.42; }
.sec-foto::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(20,26,35,.88) 0%,rgba(20,26,35,.72) 50%,rgba(20,26,35,.92) 100%);
}
.sec-foto > .wrap{ position:relative; z-index:2; }
.sec-foto h2,.sec-foto h3{ color:#fff; }
.sec-foto .sub{ color:rgba(251,249,245,.76); }
.sec-foto .rotulo{ color:var(--ambar-lt); }

/* ---------- 4 · par foto + texto que se alternan ----------
   En teléfono siempre una columna, foto arriba. */
.par{ display:grid; gap:26px; align-items:center; }
@media (min-width:900px){
  .par{ grid-template-columns:repeat(2,1fr); gap:48px; }
  .par-inv .par-foto{ order:2; }
}
.par-foto{ position:relative; border-radius:var(--r-l); overflow:hidden; background:var(--arena); }
.par-foto img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.par-foto.alto img{ aspect-ratio:3/4; }
@media (min-width:900px){ .par-foto.alto img{ aspect-ratio:4/5; } }

/* ---------- 5 · mosaico ----------
   Tres o cuatro imágenes que llenan un hueco sin pedir permiso.
   En teléfono va en dos columnas para que no se haga una torre. */
.mosaico{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:760px){ .mosaico{ grid-template-columns:repeat(4,1fr); gap:14px; } }
.mosaico figure{ margin:0; position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--arena); }
.mosaico img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.mosaico figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:linear-gradient(0deg,rgba(20,26,35,.82),rgba(20,26,35,0));
}
.mosaico .ancha{ grid-column:span 2; }
.mosaico .ancha img{ aspect-ratio:3/2; }

/* ---------- 6 · retrato con marco, para columnas laterales ---------- */
.retrato{ border-radius:var(--r-l); overflow:hidden; background:var(--arena); }
.retrato img{ width:100%; object-fit:cover; aspect-ratio:3/4; }

/* ---------- 7 · fila de dato con rótulo, para fichas ---------- */
.ficha{ display:grid; gap:3px; padding:14px 0; border-bottom:1px solid rgba(20,26,35,.09); }
.oscuro .ficha,.sec-foto .ficha{ border-color:rgba(255,255,255,.12); }
.ficha:last-child{ border-bottom:none; }
.ficha dt{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--mute); }
.oscuro .ficha dt,.sec-foto .ficha dt{ color:var(--ambar-lt); }
.ficha dd{ margin:0; font-size:15px; color:var(--slate); line-height:1.55; }
.oscuro .ficha dd,.sec-foto .ficha dd{ color:rgba(251,249,245,.82); }
dl.fichas{ margin:0; }

/* ---------- 8 · créditos de imagen (obligación de las licencias CC BY) ---------- */
.creditos{ font-size:11px; color:rgba(251,249,245,.36); line-height:1.6; }
.creditos a{ color:inherit; }