/* RobotHumanoide.es — estilo Apple: negro, blanco, gris #f5f5f7 y azul #0071e3 */
:root { --barra-alto:48px; --gris:#f5f5f7; --texto:#1d1d1f; --suave:#6e6e73; --linea:#d2d2d7; --azul:#0071e3; --azul-osc:#0077ed; --enlace-osc:#2997ff; --naranja:#b64400; }
* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--barra-alto) + 12px); }
body { margin:0; font:17px/1.47 -apple-system, BlinkMacSystemFont, 'SF Pro Text', Inter, 'Helvetica Neue', Arial, sans-serif; color:var(--texto); background:#fff; letter-spacing:-.022em; }
h1, h2, h3, .pill, .sub, .antetitulo, .grande { font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', Inter, 'Helvetica Neue', Arial, sans-serif; }
a { color:var(--azul); text-decoration:none; }
a:hover { text-decoration:underline; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
.oculto { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.saltar { position:absolute; left:-999px; top:8px; background:#fff; padding:8px 12px; z-index:20; }
.saltar:focus { left:8px; }
:focus-visible { outline:2px solid var(--azul); outline-offset:3px; border-radius:4px; }
.mini { font-size:12px; color:var(--suave); line-height:1.5; letter-spacing:-.01em; }
.centro { text-align:center; }

/* ---------- Barra ---------- */
.barra { position:sticky; top:0; z-index:10; height:var(--barra-alto); background:rgba(0,0,0,.8); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); }
.barra-in { max-width:1024px; margin:0 auto; padding:0 22px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.marca { display:flex; align-items:center; gap:8px; color:#f5f5f7; font-size:17px; letter-spacing:-.02em; white-space:nowrap; }
.marca:hover { text-decoration:none; }
.marca img { filter:brightness(0) invert(1); flex-shrink:0; }
.marca-texto { display:grid; gap:3px; line-height:1; }
.marca b { font-family:"Rethink Sans",Inter,sans-serif; font-weight:750; letter-spacing:-.055em; }
.marca-neo { color:#00b8f0; }
.marca small { font-size:8px; font-weight:700; letter-spacing:.34em; text-transform:uppercase; }
.barra nav { display:flex; align-items:center; gap:clamp(16px, 2.5vw, 26px); font-family:"Rethink Sans",Inter,sans-serif; font-size:15px; font-weight:600; letter-spacing:0; }
.barra nav a { color:#e6e8ee; }
.barra nav a:hover { color:#fff; text-decoration:none; }

/* Barra secundaria de la ficha (como la de los productos de Apple) */
.sub-barra { position:sticky; top:var(--barra-alto); z-index:9; height:52px; background:rgba(251,251,253,.85); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.16); }
.sub-barra-in { max-width:1024px; margin:0 auto; padding:0 22px; height:100%; display:flex; align-items:center; gap:16px; }
.sub-barra strong { font-size:21px; font-weight:600; letter-spacing:.011em; margin-right:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub-barra span { font-size:12px; color:var(--suave); white-space:nowrap; }

/* ---------- Botones y enlaces ---------- */
.pill { display:inline-block; background:var(--azul); color:#fff; padding:11px 22px; border-radius:980px; font-size:17px; font-weight:400; border:0; cursor:pointer; letter-spacing:-.022em; text-align:center; }
.pill:hover { background:var(--azul-osc); text-decoration:none; }
.pill-peq { font-size:14px; padding:8px 16px; }
.pill-borde { background:transparent; color:var(--azul); box-shadow:inset 0 0 0 1px var(--azul); }
.pill-borde:hover { background:var(--azul); color:#fff; }
.pill-bloque { display:block; width:100%; }
.mas::after { content:'\00a0›'; }
.mas-osc, .negro .mas { color:var(--enlace-osc); }
.mas-blanco { color:#fff; }
.acciones { display:flex; gap:22px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:22px; }

/* ---------- Hero ---------- */
.hero { position:relative; background:#000; color:#f5f5f7; min-height:calc(100vh - var(--barra-alto)); max-height:900px; overflow:hidden; display:flex; align-items:flex-end; }
.hero-medio { min-height:620px; max-height:none; }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%), linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 40%); }
.hero-txt { position:relative; z-index:1; max-width:1024px; width:100%; margin:0 auto; padding:0 22px 9vh; }
.hero .antetitulo { font-size:21px; font-weight:600; color:#a1a1a6; margin:0 0 6px; letter-spacing:.004em; }
.hero h1 { font-size:clamp(48px, 9vw, 96px); line-height:1.02; font-weight:700; letter-spacing:-.045em; margin:0; max-width:820px; }
.hero-medio h1 { font-size:clamp(40px, 7vw, 72px); }
.hero .sub { font-size:clamp(19px, 2.2vw, 24px); line-height:1.35; color:#d2d2d7; max-width:560px; margin:16px 0 0; letter-spacing:-.01em; font-weight:400; }
.hero .acciones { justify-content:flex-start; }

/* ---------- Bloques ---------- */
.bloque { padding:110px 22px; text-align:center; }
.bloque h1, .bloque h2 { font-size:clamp(40px, 6.5vw, 80px); line-height:1.05; font-weight:700; letter-spacing:-.045em; margin:0; }
.bloque .sub { font-size:clamp(19px, 2.2vw, 28px); line-height:1.25; color:var(--suave); max-width:740px; margin:14px auto 0; font-weight:500; letter-spacing:-.02em; }
.antetitulo-osc { font-size:clamp(17px, 1.8vw, 21px); font-weight:600; color:var(--naranja); margin:0 0 8px; }
.gris { background:var(--gris); }
.negro { background:#000; color:#f5f5f7; }
.negro .sub { color:#a1a1a6; }
.foto-ancha { max-width:1024px; margin:56px auto 0; border-radius:28px; overflow:hidden; aspect-ratio:16 / 9; background:#111; }
.foto-ancha img { width:100%; height:100%; object-fit:cover; }
.migas-wrap { max-width:1024px; margin:-70px auto 50px; text-align:left; }
.migas { font-size:12px; color:var(--suave); }
.migas a { color:var(--suave); }

/* ---------- Comparador ---------- */
.filtros { max-width:1024px; margin:40px auto 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.segmentos { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:100%; }
.seg { border:0; background:#e8e8ed; color:var(--texto); font:inherit; font-size:14px; font-weight:500; letter-spacing:-.01em; padding:9px 16px; border-radius:980px; cursor:pointer; }
.seg .n { color:var(--suave); font-size:12px; margin-left:2px; }
.seg.activo { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); font-weight:600; }
.selects { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.selects select { appearance:none; -webkit-appearance:none; font:inherit; font-size:14px; color:var(--texto); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; border:1px solid var(--linea); border-radius:12px; padding:9px 36px 9px 14px; cursor:pointer; }
.contador { margin:36px 0 0; color:var(--suave); font-size:14px; }
.sin-resultados { color:var(--suave); padding:40px 0 0; }

.modelos { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; max-width:1024px; margin:40px auto 0; text-align:center; }
.modelos-tres { margin-top:56px; }
.modelo { background:#fff; border-radius:28px; padding:40px 24px 32px; display:flex; flex-direction:column; align-items:center; transition:transform .25s, box-shadow .25s; }
.modelo:hover { transform:scale(1.015); box-shadow:2px 4px 24px rgba(0,0,0,.08); }
.bloque:not(.gris) .modelo { background:var(--gris); }
.etiqueta { font-size:12px; font-weight:600; color:var(--naranja); min-height:16px; letter-spacing:-.01em; }
.modelo h3 { font-size:28px; font-weight:700; letter-spacing:-.035em; margin:6px 0 4px; line-height:1.1; }
.modelo h3 a { color:var(--texto); }
.modelo .lema { color:var(--suave); font-size:16px; min-height:48px; margin:0; line-height:1.4; }
.cifras { display:flex; gap:22px; justify-content:center; margin:22px 0; padding:20px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); width:100%; }
.cifras div { display:flex; flex-direction:column; min-width:0; }
.cifras strong { font-size:24px; font-weight:600; letter-spacing:-.03em; white-space:nowrap; }
.cifras span { font-size:12px; color:var(--suave); }
.precio { font-size:17px; margin:0 0 4px; }
.modelo .acciones { margin-top:auto; padding-top:14px; gap:16px; }
.modelo .mas { font-size:14px; }

/* ---------- Mosaico ---------- */
.mosaico { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; background:#fff; }
.tesela { position:relative; min-height:580px; overflow:hidden; color:#f5f5f7; display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 26px; }
.tesela:hover { text-decoration:none; }
.tesela img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .6s ease; }
.tesela:hover img { transform:scale(1.03); }
.tesela::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 60%); z-index:0; }
.tesela > *:not(img) { position:relative; z-index:1; }
.tesela h3 { font-size:clamp(32px, 4vw, 48px); font-weight:700; letter-spacing:-.04em; margin:0; line-height:1.08; }
.tesela p { font-size:21px; margin:8px 0 14px; color:#e8e8ed; letter-spacing:-.02em; }

/* ---------- FAQ ---------- */
.faq-lista { max-width:820px; margin:40px auto 0; text-align:left; }
.faq { border-bottom:1px solid var(--linea); }
.faq summary { cursor:pointer; list-style:none; padding:22px 40px 22px 0; font-size:21px; font-weight:600; letter-spacing:-.02em; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:4px; top:16px; font-size:28px; font-weight:300; color:var(--suave); transition:transform .2s; }
.faq[open] summary::after { transform:rotate(45deg); }
.faq p { margin:0 0 22px; color:var(--suave); font-size:17px; }

/* ---------- Ficha ---------- */
.ficha-hero { padding-bottom:70px; }
.ficha-precio { font-size:21px; margin:18px 0 0; }
.ficha-precio small { color:var(--suave); font-size:15px; }
.cifras-grandes { max-width:760px; margin:56px auto 0; gap:clamp(18px, 3vw, 36px); border:0; padding:0; flex-wrap:wrap; }
.cifras-grandes div { max-width:100%; }
.cifras-grandes strong { font-size:clamp(32px, 5vw, 48px); font-weight:700; letter-spacing:-.04em; white-space:normal; overflow-wrap:anywhere; }
.cifras-grandes div:last-child { max-width:min(100%, 18rem); }
.cifras-grandes div:last-child strong { font-size:clamp(20px, 3vw, 32px); }
.cifras-grandes span { font-size:14px; }
.ficha-cuerpo { text-align:left; padding-top:80px; }
.ficha-grid { max-width:1024px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:40px; align-items:start; }
.ficha-resumen { font-size:clamp(21px, 2.4vw, 28px); line-height:1.3; font-weight:600; letter-spacing:-.025em; margin:0 0 30px; }
.h2-peq { font-size:28px !important; letter-spacing:-.03em !important; margin:40px 0 14px !important; }
.tabla-datos { width:100%; border-collapse:collapse; background:#fff; border-radius:18px; overflow:hidden; font-size:15px; }
.tabla-datos th, .tabla-datos td { padding:14px 18px; border-bottom:1px solid #e8e8ed; text-align:left; vertical-align:top; }
.tabla-datos tr:last-child th, .tabla-datos tr:last-child td { border-bottom:0; }
.tabla-datos th { width:38%; color:var(--suave); font-weight:400; }
.pros-contras { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pros, .contras { list-style:none; padding:0; margin:0; }
.pros li, .contras li { padding:6px 0 6px 26px; position:relative; }
.pros li::before { content:'✓'; position:absolute; left:0; color:#1d8f3e; font-weight:700; }
.contras li::before { content:'–'; position:absolute; left:2px; color:var(--suave); font-weight:700; }
.ficha-grid > *, .dos-col > * { min-width:0; overflow-wrap:anywhere; }
.fuentes { padding-left:18px; font-size:14px; }
.ficha-compra { position:sticky; top:120px; background:#fff; border-radius:24px; padding:26px; }
.ficha-compra .h2-peq { margin-top:0 !important; }
.ficha-compra hr { border:0; border-top:1px solid var(--linea); margin:20px 0; }
.ficha-compra p { font-size:15px; }
.fila-tienda { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #e8e8ed; color:var(--texto); font-size:15px; }
.fila-tienda:hover { text-decoration:none; }
.fila-tienda .mas { color:var(--azul); white-space:nowrap; }

/* ---------- Artículos y guías ---------- */
.guia-cab { padding-bottom:30px; }
.guia-cab .mini { margin-top:14px; }
.articulo { max-width:692px; margin:0 auto; padding:30px 22px 100px; font-size:19px; line-height:1.58; letter-spacing:-.015em; }
.articulo h1 { font-size:clamp(36px, 5vw, 56px); letter-spacing:-.04em; line-height:1.07; margin:80px 0 20px; }
.articulo h2 { font-size:clamp(28px, 3.4vw, 40px); letter-spacing:-.035em; line-height:1.1; margin:64px 0 16px; }
.articulo li { margin-bottom:10px; }
.articulo .faq summary { font-size:19px; }
.articulo-col { padding:0; font-size:17px; max-width:none; }
.articulo-col h2:first-child { margin-top:0; }
.articulo-legal { padding-bottom:80px; }
.pasos { padding-left:22px; }
.vs { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0 30px; }
.vs-col { background:var(--gris); border-radius:24px; padding:28px 18px; text-align:center; }
.vs-col h3 { font-size:26px; letter-spacing:-.03em; margin:6px 0 2px; }
.vs-col h3 a { color:var(--texto); }
.vs-col .cifras { margin:16px 0 0; padding:14px 0 0; border-bottom:0; gap:14px; }
.vs-col .cifras strong { font-size:20px; }

/* ---------- Tablas ---------- */
.bloque-tabla { padding:0 22px 100px; }
.tabla-scroll { overflow-x:auto; max-width:1024px; margin:0 auto; border-radius:18px; border:1px solid #e8e8ed; }
.tabla-ayuda { display:none; }
@media (max-width:780px) {
  .tabla-ayuda { display:block; margin:0 0 10px; }
  .tabla-modelos tbody th, .tabla-modelos thead th:first-child { position:sticky; left:0; border-right:1px solid #e8e8ed; }
  .tabla-modelos tbody th { background:#fff; }
}
.articulo .tabla-scroll { margin:20px 0 10px; }
.tabla-comparativa { width:100%; border-collapse:collapse; font-size:14px; min-width:720px; letter-spacing:-.01em; }
.tabla-comparativa th, .tabla-comparativa td { padding:14px 16px; text-align:left; border-bottom:1px solid #e8e8ed; vertical-align:top; }
.tabla-comparativa thead th { background:var(--gris); font-weight:600; font-size:12px; color:var(--suave); white-space:nowrap; }
.tabla-comparativa tbody tr:last-child th, .tabla-comparativa tbody tr:last-child td { border-bottom:0; }
.tabla-comparativa tbody th a { font-weight:600; color:var(--texto); }
.tabla-comparativa tbody th small { display:block; color:var(--suave); font-weight:400; font-size:12px; }

/* ---------- Formularios ---------- */
.dos-col { max-width:1024px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1fr) 420px; gap:50px; align-items:start; text-align:left; }
.formulario { position:sticky; top:72px; background:#fff; border-radius:28px; padding:32px; }
.formulario h2 { font-size:32px !important; letter-spacing:-.035em !important; margin:0 !important; }
.campo { margin-top:16px; }
.campo label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; }
.opc { color:var(--suave); font-weight:400; }
.formulario input:not([type=checkbox]), .formulario select, .formulario textarea { width:100%; font:inherit; font-size:17px; padding:13px 14px; border:1px solid #86868b; border-radius:12px; background:#fff; color:var(--texto); }
.formulario select { appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right:36px; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline:none; border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,113,227,.2); }
.formulario .check { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--suave); margin-top:16px; line-height:1.45; }
.formulario .check input { margin-top:2px; width:16px; height:16px; flex:0 0 auto; }
.formulario button { margin-top:22px; }
.trampa { position:absolute; left:-9999px; }
.gracias { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gracias img { margin-bottom:20px; }

/* ---------- Pie ---------- */
.pie { background:var(--gris); color:var(--suave); font-size:12px; line-height:1.4; letter-spacing:-.01em; }
.pie-in { max-width:1024px; margin:0 auto; padding:20px 22px 30px; }
.pie-notas { border-bottom:1px solid var(--linea); padding-bottom:16px; }
.pie-notas p { margin:0 0 8px; }
.pie-cols { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; padding:20px 0; border-bottom:1px solid var(--linea); }
.pie-cols strong { color:var(--texto); font-weight:600; display:block; margin-bottom:8px; }
.pie-cols a { color:#424245; display:block; margin-bottom:8px; }
.pie-final { padding-top:14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ---------- Móvil ---------- */
@media (max-width:1000px) { .modelos { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:860px) {
  .mosaico { grid-template-columns:1fr; padding:0; gap:0; }
  .tesela { min-height:480px; }
  .pie-cols { grid-template-columns:1fr 1fr; }
  .bloque { padding:80px 22px; }
  .migas-wrap { margin:-50px auto 36px; }
  .hero::after { background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 75%); }
  .ficha-grid, .dos-col { grid-template-columns:minmax(0, 1fr); }
  .ficha-compra, .formulario { position:static; }
  .sub-barra span { display:none; }
}
@media (max-width:640px) {
  :root { --barra-alto:84px; }
  .barra-in { padding:0 12px; flex-direction:column; justify-content:center; gap:2px; }
  .barra nav { width:100%; justify-content:space-evenly; gap:6px; font-size:13px; }
  .barra nav a { padding:8px 0; white-space:nowrap; }
  .seg { padding:8px 12px; }
  .modelos { grid-template-columns:minmax(0, 1fr); max-width:460px; }
  .tabla-datos th, .tabla-datos td { padding:10px 12px; }
  .pros-contras, .vs { grid-template-columns:1fr; }
  .cifras-grandes { flex-wrap:wrap; gap:26px 34px; }
  .foto-ancha { border-radius:18px; aspect-ratio:4 / 3; }
  .formulario { padding:24px 20px; }
  .articulo { font-size:17px; }
  .sub-barra strong { font-size:17px; }
}

/* ---------- Foto del robot en tarjetas y fichas ---------- */
.robot-foto { width:100%; aspect-ratio:4 / 5; margin:-16px 0 22px; border-radius:20px; overflow:hidden; background:#e8e8ed; }
.robot-foto img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.modelo:hover .robot-foto img { transform:scale(1.04); }
.bloque:not(.gris) .modelo .robot-foto { background:#fff; }
.robot-foto-vacia { display:flex; align-items:center; justify-content:center; }
.robot-foto-vacia img { opacity:.35; }
.robot-foto-grande { max-width:560px; margin:44px auto 0; border-radius:28px; }
figure.robot-foto-grande { aspect-ratio:auto; overflow:visible; background:none; }
figure.robot-foto-grande img { aspect-ratio:4 / 5; height:auto; border-radius:28px; background:#e8e8ed; }
.robot-foto-grande figcaption { overflow-wrap:anywhere; font-size:12px; color:var(--suave); margin-top:10px; letter-spacing:-.01em; }
.robot-foto-grande figcaption a { color:var(--suave); text-decoration:underline; }
.robot-foto-vacia { flex-direction:column; gap:10px; }
.robot-foto-vacia span { font-size:12px; color:#86868b; letter-spacing:-.01em; }
.precio small { color:var(--suave); font-size:13px; }